脚本宝典收集整理的这篇文章主要介绍了再谈vue前进刷新,后退不刷新,include实现方法。,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
关于填坑vue的前进刷新与后退不刷新,网上有很多方法,基本都是利用 keep-alive,但是试了好多种方法都不尽人意,后来有人提示说基于keepalive include,试验了一下找到了些思路,暂时实验可行,分享下共同探讨学习,也许不是最佳解决方案,但确实有效。这里需要用到vuex,如不用vuex可以自行用Local Storage代替。
<keep-alive :include="includeds">
<router-view></router-view>
</keep-alive>
computed:{
includeds(){
return this.$store.state.includeds
}
}
state: {
includes: ''
},
mutations: {
setIncludeds(state,setdata){
state.includeds = setdata
}
}
router.beforeEach((to, from, next) => {
let addPage = ['addProduct','newEdit','showNews'];
if (!mCd.inArray(to.name,addPage)) { //此处mCd.inArray的方法为判断数组是否包含,需要自己实现。
store.commit('setIncludeds','');
}
next();
})
export default{
name: 'news',
data() {
return {
....
}
},
activated(){
this.$store.commit('setIncludeds','news'); //此处设置name一致的名称
}
}
*注意:此处activated里设置的commit里第二个参数,必须与name名称一致。
1. 通过设置keepalive 的 include,当然也可以设置exclude,自行百度。include为要缓存的页面name
2. 在页面activated的时候设置为缓存当前页面。
3. 页面跳转的时候判断路由的to.name是否包含在已设置的数组中。
4. 跳转到edit或show页面,返回后回到缓存页面,不刷新。由其他页面进入则刷新。
5. 如果不设置路由全局守卫,也可以每个页面单独写beforeRouteLeave
以上是脚本宝典为你收集整理的再谈vue前进刷新,后退不刷新,include实现方法。全部内容,希望文章能够帮你解决再谈vue前进刷新,后退不刷新,include实现方法。所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。