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