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 组件就可以分别缓存状态啦，其实只是一开始想错了，换个思路就可以了
