再谈vue行进革新，退却不革新，include完成要领。

2023年9月17日 221次阅读 来源: 梦迟

关于填坑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

也不知道如许写对不对。横竖现在能够完成想要的结果。别的路由嵌套不是很深。假如哪位大侠有更好的要领，迎接供应。^_^

    原文作者：梦迟
    原文地址: https://segmentfault.com/a/1190000015630901
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞