https://blog.csdn.net/yanxiaomu/article/details/100753335
本文重要解決 vue 使用 keep-alive 緩存頁面狀態(tài)時咸包，當(dāng)不同路由指向同一個組件桃序，如何分別緩存頁面狀態(tài)的問題
1.問題產(chǎn)生
由于新建頁面和編輯頁面基本相同，所以二個路由頁面指向同一個組件烂瘫，在使用 keep-alive 緩存的時候不能分別緩存這兩個頁面的狀態(tài)
問題代碼如下
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>
問題：這樣做會導(dǎo)致兩個頁面狀態(tài)完全一樣媒熊，因為引用的就是同一個組件，keep-alive 緩存的也就是同一個組件
2.問題解決：
不要在 router/index.js 里將多個路由指向同一個組件坟比，而應(yīng)該新建多個頁面組件芦鳍，每個組件中只是作為 HelloWorld 組件的容器，然后多個路由頁面分別指向不同的頁面組件葛账，然后在 keep-alive 的 include 屬性中加入所有路由組件的 name怜校，就可以實現(xiàn)分別緩存同一組件不同實例的狀態(tài)了
新建 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 關(guān)鍵代碼
<template>
<div id="app">
<template>
<!-- 需要緩存的路由 -->
<keep-alive :include="['newHelloWorld', 'editHelloWorld']">
<router-view :key="$route.fullPath"></router-view>
</keep-alive>
</template>
</div>
</template>
這樣就可以啦，兩個HelloWorld 組件就可以分別緩存狀態(tài)啦注竿，其實只是一開始想錯了茄茁，換個思路就可以了
