Vue keep-alive，不同路由指向同一个组件，如何分别缓存页面状态

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

App.vue

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

2.问题解决：

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

新建 newHelloWorld.vue

新建 editHelloWorld.vue

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 关键代码

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

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

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