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

2021/10/23
- 编程
0阅读

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

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

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

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

1
2
3

<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组件组件名即可。

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

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

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

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

其他推荐内容

js 在鼠标光标处插入内容

002.买卖股票的最佳时机 II

PHP [preg_match] No ending delimiter '^' found in

评论区