keep-alive + router meta

Add a keepAlive attribute to the meta of the router. Use the keepAlive package to pass through the router-view component and use the keepAlive attribute in the meta

// router The route is configured with the keepAlive attribute
{    
    path: "/".component: Layout,
    redirect: "/home".children: [{path: "home".name: "Home".meta: {        
                keepAlive: true       
            },        
            component: () = > import("@/views/Home.vue")}, {path: "about".name: "About".component: () = > import("@/views/About.vue")}}]// Router-view 
      
<router-view v-if="$route.meta.keepAlive" :key="key"></router-view> </keep-alive> 
<router-view v-if=! "" $route.meta.keepAlive" :key="key"></router-view>
Copy the code

keep-alive + component name

Use the keep-alive prop attribute include to set the components that need to be cached, exclude the components that do not need to be cached, and Max to set the maximum number of caches. If the maximum number of caches exceeds this value, the cached component instances that have not been accessed for the longest time will be destroyed. In this way, be sure to set the correct component name

The above two methods can implement the specified page, but the problem is that the page is cached regardless of the jump from the cached page to any other page. The cached page cannot be controlled to jump to the specified page before being cached. For example, you can switch from page A to page B and page C. Now we want to implement that page A is cached only when we jump to page B, and page C is not cached. To implement this dynamic caching, you can directly manipulate the cache properties of the Keepalive component instance using the following method.

Dynamically remove keepalive component cache: Reference zhuanlan.zhihu.com/p/40374425 keep alive – the default does not support dynamic destruction of cached components, so the solution is given by direct manipulation of the keep – alvie cahce list of components

beforeRouteLeave:function(to, from, Next){if (from && from.meta. Rank && to.meta. Rank && from.meta. Rank >to.meta. Rank){if (from && from.meta. Decide whether to destroy this layer cache. if (this.$vnode && this.$vnode.data.keepAlive) { if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) { if (this.$vnode.componentOptions) { var key = this.$vnode.key == null ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '') : this.$vnode.key; var cache = this.$vnode.parent.componentInstance.cache; var keys = this.$vnode.parent.componentInstance.keys; if (cache[key]) { if (keys.length) { var index = keys.indexOf(key); if (index > -1) { keys.splice(index, 1); } } delete cache[key]; } } } } this.$destroy(); } next(); },Copy the code

Vuex or localStorage stores status data

In beforeRouterLeave, save page status data before route redirects. In Mounted, set page status data. Notice beforeRouterLeave takes effect only in the component that has been configured with a route. You need to use $refs in the parent component to access the child component’s data and method routing parameters to store data

  1. Use watch to monitor the changes of page state data.
  2. $route.qeuryTo set the route parameters, the query object must be copied and then called$router.pushMethod, the browser address bar parameters will change
  3. When the page returns, themounted 或createdRead save route parameters and assign values
detailLessonRadioBtn: { handler(val) { let query = Object.create(this.$route.query); query.tab = this.formModel.tabModel; query.subtab = this.detailLessonRadioBtn; this.$router.push({ path: this.$route.path, query }); } } }, created() { if (this.$route.query.tab) { this.formModel.tabModel = this.$route.query.tab; if (this.$route.query.subtab) { this.detailLessonRadioBtn = this.$route.query.subtab; }}}Copy the code

localStorage vs sessionStorage

localStorage:

  1. The stored data is shared across the browser’s different TAB and window pages, as long as there is the same Origin
  2. There is no expiration date, even if the browser is closed and the computer is shut down, the data will not be erased

sessionStorage:

  1. The saved data is valid only for the current TAB page and cannot be accessed by other tabs, even if the origin is the same. Different TAB pages have different sessionStorage
  2. When the page is closed, the data is erased. Data is not cleared when the page is refreshed
  3. Data can be shared between different IFrames on the same TAB page

Summary: sessionStorage and localStorage properties and methods are the same, sessionStorage in function compared to localStorage is subject to more restrictions