再談vue前進刷新，後退不刷新，include實現方法。

關於填坑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

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