我要评论一、应用场景：
在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的原来数据以及滚动位置，这个时候就需要保存状态，要缓存状态。
概括来讲：
1、列表页面 ——进入详情页 —— 后退到列表页（缓存列表页的原来数据以及滚动位置）
2、重新进入列表页面，获取最新的数据
二、如何使用
在vue2.1.0版本之后的使用方法(推荐方法)
1、创建router实例的时候加上scrollBehavior方法
//在router中的index.js
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes,
scrollBehavior(to,from,savedPosition){
if (savedPosition){
return savedPosition
}else{
return{
x:0,
y:0
}
}
}
})
2、在store里加入需要缓存的的组件的变量名，和相应的方法
export default new Vuex.Store({
state: {
includeList:[]
},
mutations: {
get_include(state,data){
state.includeList = data;
}
})
3、在App.vue中
<!-- include 需要缓存的组件 -->
<keep-alive :include="includeList">
<router-view />
</keep-alive>
<script>
import { mapState } from 'vuex';
export default {
name: 'App',
data() {
return {
}
},
computed: {
...mapState(['includeList'])
},
created() {
}
}
</script>
4、在beforeRouteLeave钩子函数里控制需要缓存的组件
注意beforeRouteLeave导航守卫是必须写在当前单页面中，不能写在App.vue中
beforeRouteLeave(to, from, next) {
//跳转到详情页时缓存当前列表页，反之不缓存
if (to.path === '/GoodDetail') {
this.$store.commit('get_include', ['Home'])
} else {
this.$store.commit('get_include', [])
}
next()
},
此方法将需要缓存的组件保存到全局变量，可以在路由的钩子函数里灵活的控制哪些组件需要缓存，那些不需要缓存，不需要每次再重新初始化数据，但是需要在vuex中保存数据；
在vue2.1.0版本之前使用方法
1、meta标签中记录keepAlive的属性为true
2、 创建router实例的时候加上scrollBehavior方法
//在router中的index.js
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes,
scrollBehavior(to,from,savedPosition){
if (savedPosition){
return savedPosition
}else{
return{
x:0,
y:0
}
}
}
})
3、在App.vue中
//App.vue中
<keep-alive>
<router-view v-if='$route.meta.keepAlive'></router-view>
</keep-alive>
<router-view v-if='!$route.meta.keepAlive'></router-view>
4、有些情况下需要缓存有些情况下不需要缓存，可以在缓存的组件里的路由钩子函数中做判断
注意beforeRouteLeave导航守卫是必须写在当前单页面中，不能写在App.vue中
beforeRouteLeave (to, from, next) {
if (to.path === '/goodDetail') {
from.meta.keepAlive = true
} else {
from.meta.keepAlive = false
// this.$destroy()
}
next()
},
但是这种方法有bug，首先第一次打开页面的时候并不缓存，即第一次从列表页跳到详情页，再回来并没有缓存，后面在进入详情页才会被缓存。
并且只会缓存第一次进入的状态，不会重新请求数据，如果当页面A选中一个分类跳到B页面，再从B列表页面跳往详情页，此时会缓存这个状态，并且以后再从A页面的其他分类跳到B页面都不会重新被缓存，以至于每次从详情页返回B页面都会跳第一次缓存的状态；当你的项目只有一种状态需要缓存，可以考虑使用这种方法
参考资料：https://www.cnblogs.com/mary-123/p/11248178.html
本文地址：https://blog.csdn.net/u014678583/article/details/107387891
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论