vue keep

2023-12-30 10:01| 来源: 网络整理| 查看: 265

vue keep-alive

https://cn.vuejs.org/v2/api/#keep-alive

keep-alive 不生效的可能原因

如果安装官方的写法，已经正常完成keep-alive

一级二级路由

请检查需要router 界面当前引入组件是否有name 属性, 下面Demo 的 Menu1

path: 'menu1', component: () => import('@/views/demos/nested/menu1/index'), // Parent router-view name: 'Menu1',

如果存在并被keep-alive的 include缓存['Menu1']，并且还没有生效找到这个组件，看是否存在name

export default { name: 'Menu1' }

这个name 不存在，会导致找不到！一定要注意，src/views 下面的vue 文件中的 name 一定要和 src/router/index.js 中的name 一直，否则标签页缓存不会生效

三级以及多级路由

当存在三级路由，会发现设置都没有问题，但就是不能解决问题，三级路由的界面无法缓存，据说是官方的原因，直接放三级路由是无法被keep-alive 执行生效，解决方案就是，把二级的路由name 和三级路由name 一块放到include 内。

{ // 一级路由 path: 'menu1', component: () => import('@/views/demos/nested/menu1/index'), // Parent router-view name: 'Menu1', meta: { title: 'Menu 1' }, redirect: '/nested/menu1/menu1-1', // 二级路由 children: [ { path: 'menu1-2', component: () => import('@/views/demos/nested/menu1/menu1-2'), name: 'Menu1-2', redirect: '/nested/menu1/menu1-2/menu1-2-1', meta: { title: 'Menu 1-2' }, // 三级路由 children: [ { path: 'menu1-2-1', component: () => import('@/views/demos/nested/menu1/menu1-2/menu1-2-1'), name: 'Menu1-2-1', meta: { title: 'Menu 1-2-1' } }, { path: 'menu1-2-2', component: () => import('@/views/demos/nested/menu1/menu1-2/menu1-2-2'), name: 'Menu1-2-2', meta: { title: 'Menu 1-2-2' } } ] }, { path: 'menu1-3', component: () => import('@/views/demos/nested/menu1/menu1-3'), name: 'Menu1-3', meta: { title: 'Menu 1-3' } } ] },

如果缓存的界面是 name为 Menu 1-2-1的界面，需要缓存上一级路由name： ‘Menu1-2’ 即可以解决三级路由失败，如果是更多级（三级以上）的，也可以重复以上操作（具体没有试过）

关于怎么取到到父级路由的name, 可以通过vue router的 matched 属性获取，关于include数组具体的处理方式，看个人喜好了。 https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7

【本文地址】

公司简介

联系我们