路由缓存 keep-alive

一.  keep-alive include 生效条件

include 里面的 name 指的是单文件组件中的name,例如 ClientList.vue 中的name, 不是指路由中的name

keep-alive 必须要放在最后一级，include才会生效，例如，A 页面嵌套 Asub 页面，则keep-alive要放在Asub页面，而不是放在A页面中

二. 路由控制是否缓存

<router-view v-slot="{ Component }">
     <keep-alive>
           <component v-if="$route.meta && $route.meta.keepAlive" :is="Component" :key="$route.name"/>
     </keep-alive>
     <component v-if="!($route.meta && $route.meta.keepAlive)" :is="Component" :key="$route.name"/>
 </router-view>

路由示例

import { createRouter,createWebHashHistory,RouteRecordRaw } from 'vue-router';
type AddRouteRecordRaw=RouteRecordRaw & {
    // hidden?:boolean
}
const routes:AddRouteRecordRaw[]=[
    {
        path: '/',
        name: 'home',
        // @ts-ignore 
        component: () => import('home'),
        meta: { keepAlive: true } 
    },
    {
        path: '/error',
        name: 'error',
        // @ts-ignore 
        component: () => import('error'),
    },
    {
        path: '/walletList',
        name: 'walletList',
        // @ts-ignore 
        component: () => import('walletList'),
    },
    {
        path: '/walletInfo',
        name: 'walletInfo',
        // @ts-ignore 
        component: () => import('walletInfo'),
    },
];
const router = createRouter({
    history: createWebHashHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return {
                top: 0,
                left: 0
            }
        }
    }
});
//路由守卫
router.beforeEach((to, from, next) => {
    next();
})
export default router