vue2 & vue3 router keepalive 的使用

vue2 router keep-alive的使用

const routes = [{
        path: '/',
        name: 'Home',
        component: Home,
        meta: {
            keepAlive: true,
        }
    },
    {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
            import ( /* webpackChunkName: "about" */ '../views/About.vue')
    }
]

• 通过vueRouter 的meta 存放 keepAlive 状态
• 在router-view的页面 去判断是否需要keep-alive 来缓存组件

vue3 router keep-alive的使用

• 通过 include 或者exclude 去筛选 需要keep-alive的组件名