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

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