實(shí)現(xiàn)前進(jìn)刷新 后退不刷新

場(chǎng)景：頁(yè)面A->頁(yè)面B->頁(yè)面C

用戶希望從A頁(yè)面進(jìn)入B頁(yè)面時(shí)，刷新頁(yè)面，從C頁(yè)面返回時(shí)，保留頁(yè)面緩存。

1.使用keep-alive組件，可通過include控制需要緩存的頁(yè)面

<keep-alive>
    <router-view :key="$route.name" :include="['PageB']"/>
</keep-alive>

經(jīng)緩存的頁(yè)面不會(huì)被銷毀，但是達(dá)不到要求，從A，C進(jìn)入B頁(yè)面都會(huì)保留頁(yè)面緩存，不會(huì)刷新，因此需要控制頁(yè)面在需要的時(shí)候刷新，以下是實(shí)現(xiàn)過程中采用過兩種的方法(不建議)：

方法1.直接調(diào)用對(duì)應(yīng)的頁(yè)面的$destory()方法

goBack() { // 調(diào)用路由返回方法的同時(shí)
      this.$router.back();
      this.$destroy()
},

可以實(shí)現(xiàn)關(guān)閉頁(yè)面（下次再打開該頁(yè)面，將初始化）的功能，但是 this.$destroy()存在問題，在銷毀頁(yè)面緩存的同時(shí)，該頁(yè)面將不再被緩存，也就是說第二次進(jìn)入B頁(yè)面時(shí)，B頁(yè)面不在被緩存。

方法2.返回使用this.$router.push()，push方法可以傳遞一個(gè)頁(yè)面是否刷新的參數(shù)

可以實(shí)現(xiàn)頁(yè)面的路由刷新控制，同時(shí)達(dá)到了返回傳遞參數(shù)的效果，正常的頁(yè)面跳轉(zhuǎn)是正常運(yùn)行的，除了移動(dòng)端的手勢(shì)功能，這和瀏覽器的回退按鈕功能一樣，會(huì)依次回退顯示歷史紀(jì)錄棧中的頁(yè)面，而通過push替代back方法會(huì)不斷入棧，因此使用手勢(shì)返回會(huì)導(dǎo)致路由跳轉(zhuǎn)混亂和頁(yè)面顯示錯(cuò)誤。

2.言歸正傳，控制頁(yè)面路由刷新的方法還是多種多樣的

方法一：定義pageInit參數(shù) 控制頁(yè)面路由刷新

定義pageInit（每個(gè)需要控制的路由的meta屬性都需要定義）

{
    path: '/PageB',
    name: 'PageB',
    meta: {
      name: '頁(yè)面B',
      desc: '頁(yè)面B',
      pageInit: false,
    },
    component: PageB,
},

控制pageInit(重寫router的push方法)

Router.prototype.pushPage = function (param) {
  this.push(param)
  this.currentRoute.meta.pageInit = true
}

具體頁(yè)面的實(shí)現(xiàn)

if (this.$route.meta.pageInit) {
    // 利用this.$options.data() 注意使用call()傳遞this指向 否則會(huì)出現(xiàn)undefined的情況
    Object.assign(this.$data, this.$options.data.call(this))
    // 調(diào)用ajax請(qǐng)求 初始化數(shù)據(jù)
    } else {
      // 頁(yè)面返回 不更新數(shù)據(jù)
    }
    // pageInit賦值false 防止重復(fù)刷新
    this.$route.meta.pageInit = false
}

這樣就可以簡(jiǎn)單的實(shí)現(xiàn)頁(yè)面前進(jìn)刷新，后退不刷新，關(guān)于控制pageInit的方法還有很多，通過beforeRouteEnter和beforeRouteLeave可以更好的判斷頁(yè)面從哪個(gè)頁(yè)面進(jìn)入，或?qū)⑦M(jìn)入哪個(gè)頁(yè)面，設(shè)置pageInit值

beforeRouteEnter(to, from, next)：進(jìn)入路由之前執(zhí)行的函數(shù),寫在組件里可根據(jù)路由進(jìn)行頁(yè)面判斷或傳值。
beforeRouteLeave(to, from, next)：離開路由之前執(zhí)行的函數(shù),可用于頁(yè)面的反向傳值，頁(yè)面跳轉(zhuǎn)。

方法二：動(dòng)態(tài)修改includes數(shù)組(官方提供的方法)

利用keep-alive的include，打開頁(yè)面時(shí)，把當(dāng)前組件名加入到include數(shù)組里，退出頁(yè)面時(shí)從數(shù)組中刪除關(guān)閉標(biāo)簽的組件名就可以了

同樣需要用到beforeRouteEnter和beforeRouteLeave兩個(gè)函數(shù)

方法三：暴力移除緩存