https://blog.csdn.net/yanxiaomu/article/details/100753335

本文重要解决 vue 使用 keep-alive 缓存页面状态时，当不同路由指向同一个组件，如何分别缓存页面状态的问题

1.问题产生

由于新建页面和编辑页面基本相同，所以二个路由页面指向同一个组件，在使用 keep-alive 缓存的时候不能分别缓存这两个页面的状态

问题代码如下

router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
let router = new Router({
    routes: [{
        path: '/newHelloWorld',
        name: 'newHelloWorld',
        meta: {
            type: 'new'
        },
        component: () => import('@/views/operateHelloWorld/operateHelloWorld.vue')
    },{
        path: '/editHelloWorld',
        name: 'editHelloWorld',
        meta: {
            type: 'edit'
        },
        component: () => import('@/views/operateHelloWorld/operateHelloWorld.vue')
    }]
})
export default router;

operateHelloWorld

<template>
    <div>
        <input type="text" v-model="msg">
    </div>
</template>
<script>
    export default {
        name: 'operateHelloWorld',
        data() {
            return {
                msg: ''
            }
        }
    }
</script>

App.vue

<template>
    <div id="app">
        <template>
            <!-- 需要缓存的路由 -->
            <keep-alive :include="['newHelloWorld', 'editHelloWorld']">
                <router-view :key="$route.fullPath"></router-view>
            </keep-alive>
        </template>
    </div>
</template>

问题：这样做会导致两个页面状态完全一样，因为引用的就是同一个组件，keep-alive 缓存的也就是同一个组件

2.问题解决：

不要在 router/index.js 里将多个路由指向同一个组件，而应该新建多个页面组件，每个组件中只是作为 HelloWorld 组件的容器，然后多个路由页面分别指向不同的页面组件，然后在 keep-alive 的 include 属性中加入所有路由组件的 name，就可以实现分别缓存同一组件不同实例的状态了

新建 newHelloWorld.vue

<template>
    <div>
        <hello-world></hello-world>
    </div>
</template>
<script>
    export default {
        name: 'newHelloWorld',
        components:{
            HelloWorld: () => import('@/components/operateHelloWorld/operateHelloWorld.vue')
        }
    }
</script>

新建 editHelloWorld.vue

<template>
    <div>
        <hello-world></hello-world>
    </div>
</template>
<script>
    export default {
        name: 'editHelloWorld',
        components:{
            HelloWorld: () => import('@/components/operateHelloWorld/operateHelloWorld.vue')
        }
    }
</script>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
let router = new Router({
    routes: [{
        path: '/newHelloWorld',
        name: 'newHelloWorld',
        meta: {
            type: 'new'
        },
        component: () => import('@/views/newHelloWorld/newHelloWorld.vue'),
    },{
        path: '/editHelloWorld',
        name: 'editHelloWorld',
        meta: {
            type: 'edit'
        },
        component: () => import('@/views/editHelloWorld/editHelloWorld.vue'),
    }]
})
export default router;

App.vue 关键代码

<template>
    <div id="app">
        <template>
            <!-- 需要缓存的路由 -->
            <keep-alive :include="['newHelloWorld', 'editHelloWorld']">
                <router-view :key="$route.fullPath"></router-view>
            </keep-alive>
        </template>
    </div>
</template>

这样就可以啦，两个HelloWorld 组件就可以分别缓存状态啦，其实只是一开始想错了，换个思路就可以了

不要把路由直接指向同一个组件，而是用两个路由页面组件作为容器，包裹相同的组件

如果需要动态设置路由 keep-alive，请结合 https://www.jianshu.com/p/cd422ab7c267