方法二:使用 include + beforeRouteLeave + vuex 与方法一相似,不同的地方在于,将需要缓存的组件保存到全局变量,可以在路由的钩子函数里灵活的控制哪些组件需要缓存,那些不需要缓存;跟方法一相比,不需要每次再重新初始化数据,但是需要在vuex中保存数据;
1、在创建router实例的时候加上scrollBehavior方法
export default new Router({
routes,
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return {
x: 0,
y: 0
}
}
}
})
2、将需要缓存的组件加在include属性里
<keep-alive :include="catch_components">
<router-view></router-view>
</keep-alive>
3、在store里加入需要缓存的的组件的变量名,和相应的方法;
export default new Vuex.Store({
state: {
catch_components: []
},
mutations:{
GET_CATCHE_COMPONENTS (state, data) {
state.catch_components = data
}
}
})
4、在beforeRouteLeave钩子函数里控制需要缓存的组件
beforeRouteLeave (to, from, next) { //要在离开该组件的时候控制需要缓存的组件,否则将出现第一次不缓存的情况
this.busy = true
if (to.path === '/goods_detail') { // 去往详情页的时候需要缓存组件,其他情况下不需要缓存
this.$store.commit('GET_CATCHE_COMPONENTS', ['home']) //注意,'home'将匹配首先检查组件自身的 name 选项(非router.js里的),如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
} else {
this.$store.commit('GET_CATCHE_COMPONENTS', [])
}
next()}
网友评论