4

关于填坑vue的前进刷新与后退不刷新,网上有很多方法,基本都是利用 keep-alive,但是试了好多种方法都不尽人意,后来有人提示说基于keepalive include,试验了一下找到了些思路,暂时实验可行,分享下共同探讨学习,也许不是最佳解决方案,但确实有效。这里需要用到vuex,如不用vuex可以自行用Local Storage代替。

1.修改主路由页面,keep-alive 标签添加 include

<keep-alive :include="includeds">
    <router-view></router-view>
</keep-alive>

2.同时此页面添加自动computed includeds

computed:{
    includeds(){
        return this.$store.state.includeds
    }
 }

3.修改vuex的store,添加includeds对象,并添加commit方法。此处如不用vuex,也可自行设置Local Storage。

state: {
    includes: ''
},
mutations: {
    setIncludeds(state,setdata){
        state.includeds = setdata
    }
}

4.在main.js页面添加beforeEach路由守卫。并设置后退页面数组。如不用全局守卫,也可在页面单独设置单独写beforeRouteLeave,方法相同。

router.beforeEach((to, from, next) => {
    let addPage = ['addProduct','newEdit','showNews'];
    if (!mCd.inArray(to.name,addPage)) { //此处mCd.inArray的方法为判断数组是否包含,需要自己实现。
        store.commit('setIncludeds','');
    }
    next();
})

5.设置页面(news.vue)的name和activated

export default{
    name: 'news',
    data() {
        return {
            ....
        }
    },
    activated(){
        this.$store.commit('setIncludeds','news'); //此处设置name一致的名称
    }
}
*注意:此处activated里设置的commit里第二个参数,必须与name名称一致。

6.然后就可以了。

原理解析:

1. 通过设置keepalive 的 include,当然也可以设置exclude,自行百度。include为要缓存的页面name
2. 在页面activated的时候设置为缓存当前页面。
3. 页面跳转的时候判断路由的to.name是否包含在已设置的数组中。
4. 跳转到edit或show页面,返回后回到缓存页面,不刷新。由其他页面进入则刷新。
5. 如果不设置路由全局守卫,也可以每个页面单独写beforeRouteLeave

也不知道这样写对不对。反正目前可以实现想要的效果。另外路由嵌套不是很深。如果哪位大侠有更好的方法,欢迎提供。^_^


梦迟
24 声望0 粉丝