keep-alive三级以上路由不缓存
in 前端 with 0 comment

keep-alive三级以上路由不缓存

in 前端 with 0 comment

vue多页面标签栏导航的思路可以参考vue-element-admin快捷导航

根据它的做法,keep-alive已经能支持一二级页面的缓存、销毁。但是当项目存在三级及以上的页面时,就会发现该页面没有被缓存。

方法一:对三级及以上菜单进行拆平

目前互联网上常用的做法时拆平三级以上的菜单为两级菜单以支持kepp-alive的缓存。但这对需要使用到面包屑的项目就不友好了。

image-20211021113516315-16347873340322.png

平时面包屑的输出只需要这么写:

<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
    {{ item.meta.title }}
</el-breadcrumb-item>

当目录拆平之后,三级菜单在router中就得补全所有父级菜单的名称,同时面包屑也得做出对应修改,比如:

{
    path: 'index',
    name: 'Index',
    meta: {
        title: '首页', 
        parentName: [
            {
                title: '一级菜单',
                path: '/one'
            }, 
            {
                title: '二级菜单',
                path: '/two'
            }
        ] // 这里用parentName来记录所有上级目录
    }
    component: () => import('../views/Index.vue')
}

这个改动就会比较麻烦,具体实现可以参考这篇:一劳永逸,解决基于 keep-alive 的后台多级路由缓存问题

方法二:编写一个router-view组件包裹三级页面,当三级页面被访问时,同时传递该组件名和页面名

vue keep-alive 不生效和多级(三级以上)缓存失败一文中,提到了一句解决方案就是,把二级的路由name 和三级路由name 一块 放到include 内

这种改动不需要修改面包屑,只需要在点开三级页面时传递router-view组件组件名即可。

经过测试没有问题,但偶尔会遇到关闭页面后重新打开页面,缓存还未删除的情况。

Comments are closed.