Question: I am currently in charge of a back-end management project, and the most managed system is nothing more than this form, that form. And this problem is in the table, basically every data on the table should have a detail, and because the amount of data in the table is generally very large, will use paging or query search.

Requirement: that is, we need to solve the problem, this problem appears in the table page and details page or edit page jump, not good cache list page jump to other pages and then return to the scene. In short, cache list components and only cache them under the corresponding module.

All right, so how do I solve this?

Because in Vue, every page can be considered as a component, at this point, we can consider caching the page. Then I found keep-Alive on the Vue official website, and the details are as follows:

Keep-alive can cache inactive component instances, and the lifecycle hook functions activated and deactivated are available in keep-Alive.

Initially, I added meta meta information to the router, added a keepAlive property to it, and set the cached pages to true

// The page route to be cached
{
    path: '/keepAlive'.name: 'keepAlive'.component: keepAlive,
    meta: {keepAlive: true}}Copy the code

Then add keepAlive to the view component router-view

<keep-alive>
     <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if=! "" $route.meta.keepAlive"></router-view>
Copy the code

Finally, the activated and deactivated functions call the corresponding methods on the cached page.

The above method can cache the routes that meet the conditions. However, the above method has a disadvantage. Back to the original requirement, the list components should be cached under the corresponding module.

If keepAlive is set to false, the cache will be destroyed. If keepAlive is set to false, the cache will be destroyed.

When viewing the official documentation, keep-alive comes with three props, including, exclude, and Max. The specific methods of using keep-alive are described in the documentation.

API – Vue. Js

Okay, let’s get straight to my solution. I used include and vuex together, used include to determine the routes that need to be cached, and cached data globally through VUex. Since this requirement is for the list of the whole system, I still used [mixin](mixed — vue.js).

// store
state: {
    // Store components that need to be cached
    keepAliveArray: []},mutatios: {
    // Clear the cache component
    clearKeepAliveArr(state, data){
        state.keepAliveArray = data
    },
    // Add the data to be cached
    pushKeepAliveArr(state, data){
        state.keepAliveArr.push(data)
    },
}
Copy the code
// main.js
// Globally mix in a navigational guard, used when leaving the current page
Vue.mixin({
    beforeRouteLeave(to, from, next){
      // The list should be cleared of the previous data
      if(to.meta.isList ){
          this.$store.commit('clearKeepAliveArr'[]);this.$store.commit('pushKeepAliveArr',to.name); }}})Copy the code
// router
// Note that include relies on the component name to determine whether it is cached or not
// Therefore, the name must be consistent with the component name.
{
    path: 'list1'.name: 'list1'.component: list1,
    meta: {
        pageName: List of '1'.isList: true}}, {path: 'details1'.name: 'details1'.component: details1,
    meta: {
        pageName: Details of '1',}}, {path: 'list2'.name: 'list2'.component: list2,
    meta: {
        pageName: List of '2'.isList: true}},Copy the code
// The page where router-view resides
<template>
        <keep-alive :include="keepAliveArr">
            <router-view></router-view>
        </keep-alive>
</template>
<script>
export default {
    computed: {
        keepAliveArr(){
            return this.$store.state.keepAliveArr
        }
    },
};
</script>
Copy the code

If you want to cache the sessionStorage data after page refresh, you can add the sessionStorage cache data to vuex. I won’t explain it here. If the route has a child, you still need to add keep-alive to the router-view to cache the route.

If there is something wrong with the above, or you have a better way, you can leave a comment below to inform oh!

Pure hand, please give me a thumbs up!