vue，keep-alive，不同路由指向同一個組件，如何分別緩存頁面狀態

本文重要解決 vue使用keep-alive緩存頁面狀態時，當不同路由指向同一個組件，如何分別緩存頁面狀態的問題。

1.問題產生：

問題：由於三個頁面基本相同，所以三個路由頁面指向同一個組件，在使用keep-alive緩存的時候就不能分別緩存這三個頁面每個頁面的狀態。

代碼如下：
router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
let router = new Router({
	routes: [{
		path: '/h1',
		name: 'HelloWorld1',
		component: HelloWorld,
	},{
		path: '/h2',
		name: 'HelloWorld2',
		component: HelloWorld,
	},{
		path: '/h3',
		name: 'HelloWorld3',
		component: HelloWorld,
	}]
})
export default router;

HelloWorld關鍵代碼：

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

App.vue 關鍵代碼：

<keep-alive :include="['HelloWorld']">
	<router-view></router-view>
</keep-alive>

問題：這樣做會導致三個頁面狀態完全一樣，因爲引用的就是同一個組件，keep-alive緩存的也就是同一個組件。

其實不使用keep-alive組件也是一樣的，三個頁面一樣，如果使用 $router.push() 方法跳轉倒是可以在進入不同頁面時不保存上一個頁面的數據，但是也沒法緩存狀態，達不到緩存的目的。

2.問題解決：

不要在 router/index.js 裏將多個路由指向同一個組件，而應該新建多個頁面組件，每個組件中只是作爲 HelloWorld 組件的容器，然後多個路由頁面分別指向不同的頁面組件

然後在keep-alive的include屬性中加入所有路由組件的name，就可以實現分別緩存同一組件不同實例的狀態啦。

上代碼：

新建h1.vue：

<template>
    <div>
    	<hello-world></hello-world>
    </div>
</template>
<script>
	import HelloWorld from '@/components/HelloWorld'
	export default {
        name: 'h1',
        components:{HelloWorld},
    }
</script>

新建h2.vue：

<template>
    <div>
    	<hello-world></hello-world>
    </div>
</template>
<script>
	import HelloWorld from '@/components/HelloWorld'
	export default {
        name: 'h2',
        components:{HelloWorld},
    }
</script>

新建h3.vue：

<template>
    <div>
    	<hello-world></hello-world>
    </div>
</template>
<script>
	import HelloWorld from '@/components/HelloWorld'
	export default {
        name: 'h3',
        components:{HelloWorld},
    }
</script>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import h1 from '@/components/h1'
import h2 from '@/components/h2'
import h3 from '@/components/h3'
Vue.use(Router)
let router = new Router({
	routes: [{
		path: '/h1',
		name: 'HelloWorld1',
		component: h1,
	},{
		path: '/h2',
		name: 'HelloWorld2',
		component: h2,
	},{
		path: '/h3',
		name: 'HelloWorld3',
		component: h3,
	}]
})
export default router;

App.vue 關鍵代碼：

<keep-alive :include="['h1','h2','h3']">
	<router-view></router-view>
</keep-alive>

這樣就可以啦，三個HelloWorld 組件就可以分別緩存狀態啦，其實只是一開始想錯了，換個思路就可以了。

不要把路由直接指向同一個組件，而是用三個路由頁面組件作爲容器，包裹相同的組件。