vue使用keep-alive不生效解决方案

背景：在index1页面中子路由tab1打开detail1路由页面，并缓存保存tab1页面的表单信息

1、app.vue中代码

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

2、最初route.js中路由配置如下：

const routes = [
    {
        path:'detail1',
        name:"detail1",
        component:Detail1,
    },
    {
        path:'index1',
        name:"index1",
        component:Index1,
        children:[
            {
                path:'tab1',
                name:"tab1",
                component:Tab1,
                 meta: { title: '',keepAlive: true, },
            },
            {
                path:'tab2',
                name:"tab2",
                component:Tab2,
            },
        ]
    },{
        path:'index2',
        name:"index2",
        component:Index2,
    }
]

3、index1.vue中代码如下：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath"></router-view>

运行代码发现detail1页面中返回没有效果，tab1页面还是重新加载。

原因在于：keep-alive标签只对自己包含的，即里面的路由起作用，detail1页面不在index1.vue的子路由中，所以detail1页面的返回tab1还是重新加载了。

所以修改route,js如下：

const routes = [
    {
        path:'index1',
        name:"index1",
        component:Index1,
        children:[
            {
                path:'tab1',
                name:"tab1",
                component:Tab1,
                 meta: { title: '',keepAlive: true, },
            },
            {
                path:'tab2',
                name:"tab2",
                component:Tab2,
            },
             {
                path:'detail1',
                name:"detail1",
                component:Detail1,
            },
        ]
    },{
        path:'index2',
        name:"index2",
        component:Index2,
    }
]

问题解决。如果要缓存index1页面，则要在index1的父页面出口中配置keep-alive，并且index1跳转的页面要与index1是兄弟路由关系或者是子路由关系。