再談vue前進刷新，后退不刷新，include實現(xiàn)方法。

layman 發(fā)布于2019-08-22 18:43 / 2612人閱讀

摘要：并設(shè)置后退頁面數(shù)組。跳轉(zhuǎn)到或頁面，返回后回到緩存頁面，不刷新。由其他頁面進入則刷新。反正目前可以實現(xiàn)想要的效果。

關(guān)于填坑vue的前進刷新與后退不刷新，網(wǎng)上有很多方法，基本都是利用 keep-alive，但是試了好多種方法都不盡人意，后來有人提示說基于keepalive include，試驗了一下找到了些思路，暫時實驗可行，分享下共同探討學習，也許不是最佳解決方案，但確實有效。這里需要用到vuex，如不用vuex可以自行用Local Storage代替。

1.修改主路由頁面，keep-alive 標簽添加 include

2.同時此頁面添加自動computed includeds

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

3.修改vuex的store，添加includeds對象，并添加commit方法。此處如不用vuex，也可自行設(shè)置Local Storage。

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

4.在main.js頁面添加beforeEach路由守衛(wèi)。并設(shè)置后退頁面數(shù)組。如不用全局守衛(wèi)，也可在頁面多帶帶設(shè)置多帶帶寫beforeRouteLeave，方法相同。

router.beforeEach((to, from, next) => {
    let addPage = ["addProduct","newEdit","showNews"];
    if (!mCd.inArray(to.name,addPage)) { //此處mCd.inArray的方法為判斷數(shù)組是否包含，需要自己實現(xiàn)。
        store.commit("setIncludeds","");
    }
    next();
})

5.設(shè)置頁面（news.vue)的name和activated

export default{
    name: "news",
    data() {
        return {
            ....
        }
    },
    activated(){
        this.$store.commit("setIncludeds","news"); //此處設(shè)置name一致的名稱
    }
}

*注意：此處activated里設(shè)置的commit里第二個參數(shù)，必須與name名稱一致。

6.然后就可以了。 原理解析：

1. 通過設(shè)置keepalive 的 include，當然也可以設(shè)置exclude，自行百度。include為要緩存的頁面name
2. 在頁面activated的時候設(shè)置為緩存當前頁面。
3. 頁面跳轉(zhuǎn)的時候判斷路由的to.name是否包含在已設(shè)置的數(shù)組中。
4. 跳轉(zhuǎn)到edit或show頁面，返回后回到緩存頁面，不刷新。由其他頁面進入則刷新。
5. 如果不設(shè)置路由全局守衛(wèi)，也可以每個頁面多帶帶寫beforeRouteLeave

也不知道這樣寫對不對。反正目前可以實現(xiàn)想要的效果。另外路由嵌套不是很深。如果哪位大俠有更好的方法，歡迎提供。^_^