vue,keep-alive,不同路由指向同一个组件,如何分别缓存页面状态
本文重要解决 vue使用keep-alive缓存页面状态时,当不同路由指向同一个组件,如何分别缓存页面状态的问题。1.问题产生:router/index.jsimport Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)...
本文重要解决 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 组件
就可以分别缓存状态啦,其实只是一开始想错了,换个思路就可以了。
不要把路由直接指向同一个组件,而是用三个路由页面组件作为容器,包裹相同的组件。
更多推荐
所有评论(0)