vue keep-alive
https://cn.vuejs.org/v2/api/#keep-alive
keep-alive 不生效的可能原因
如果安裝官方的寫法契耿，已經(jīng)正常完成keep-alive
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
一級二級路由
請檢查需要router 界面當(dāng)前引入組件是否有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 不存在棚品，會導(dǎo)致找不到
三級以及多級路由
當(dāng)存在三級路由门怪，會發(fā)現(xiàn)設(shè)置都沒有問題掷空，但就是不能解決問題坦弟，三級路由的界面無法緩存酿傍，據(jù)說是官方的原因，直接放三級路由是無法被keep-alive 執(zhí)行生效，解決方案就是莺褒，把二級的路由name 和三級路由name 一塊 放到include 內(nèi)遵岩。
{
// 一級路由
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’ 即可以解決三級路由失敗，如果是更多級（三級以上）的签孔，也可以重復(fù)以上操作（具體沒有試過）
<keep-alive :include="['Menu1-2', 'Menu 1-2-1']">
<router-view></route-view>
</keep-alive>
關(guān)于 怎么取到到父級路由的name, 可以通過vue router的 matched 屬性獲取饥追，關(guān)于include數(shù)組具體的處理方式但绕，看個人喜好了六孵。
https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7
如果文章內(nèi)存在問題劫窒，可以聯(lián)系作者哦
