vue keep-alive 不生效和多级（三级以上）缓存失败

vue keep-alive

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

keep-alive 不生效的可能原因

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

<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</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

<script>
export default {
  name: 'Menu1'
}
</script>

 

这个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’ 即可以解决三级路由失败，如果是更多级（三级以上）的，也可以重复以上操作（具体没有试过）

<keep-alive :include="['Menu1-2', 'Menu 1-2-1']">
 <router-view></route-view>
</keep-alive>

 

关于 怎么取到到父级路由的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

转载：https://www.jianshu.com/p/1bd9c3316a95