Vue.js 控制页面前进刷新 后退不刷新

实现前进刷新 后退不刷新

场景：页面A->页面B->页面C

用户希望从A页面进入B页面时，刷新页面，从C页面返回时，保留页面缓存。

1.使用keep-alive组件，可通过include控制需要缓存的页面

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

经缓存的页面不会被销毁，但是达不到要求，从A，C进入B页面都会保留页面缓存，不会刷新，因此需要控制页面在需要的时候刷新，以下是实现过程中采用过两种的方法(不建议)：

方法1.直接调用对应的页面的$destory()方法

goBack() { // 调用路由返回方法的同时
      this.$router.back();
      this.$destroy()
},

可以实现关闭页面（下次再打开该页面，将初始化）的功能，但是 this.$destroy()存在问题，在销毁页面缓存的同时，该页面将不再被缓存，也就是说第二次进入B页面时，B页面不在被缓存。

方法2.返回使用this.$router.push()，push方法可以传递一个页面是否刷新的参数

可以实现页面的路由刷新控制，同时达到了返回传递参数的效果，正常的页面跳转是正常运行的，除了移动端的手势功能，这和浏览器的回退按钮功能一样，会依次回退显示历史纪录栈中的页面，而通过push替代back方法会不断入栈，因此使用手势返回会导致路由跳转混乱和页面显示错误。

2.言归正传，控制页面路由刷新的方法还是多种多样的

方法一：定义pageInit参数 控制页面路由刷新

定义pageInit（每个需要控制的路由的meta属性都需要定义）

{
    path: '/PageB',
    name: 'PageB',
    meta: {
      name: '页面B',
      desc: '页面B',
      pageInit: false,
    },
    component: PageB,
},

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

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

具体页面的实现

if (this.$route.meta.pageInit) {
    // 利用this.$options.data() 注意使用call()传递this指向 否则会出现undefined的情况
    Object.assign(this.$data, this.$options.data.call(this))
    // 调用ajax请求 初始化数据
    } else {
      // 页面返回 不更新数据
    }
    // pageInit赋值false 防止重复刷新
    this.$route.meta.pageInit = false
}

这样就可以简单的实现页面前进刷新，后退不刷新，关于控制pageInit的方法还有很多，通过beforeRouteEnter和beforeRouteLeave可以更好的判断页面从哪个页面进入，或将进入哪个页面，设置pageInit值

beforeRouteEnter(to, from, next)：进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值。
beforeRouteLeave(to, from, next)：离开路由之前执行的函数,可用于页面的反向传值，页面跳转。

方法二：动态修改includes数组(官方提供的方法)

利用keep-alive的include，打开页面时，把当前组件名加入到include数组里，退出页面时从数组中删除关闭标签的组件名就可以了

同样需要用到beforeRouteEnter和beforeRouteLeave两个函数

方法三：暴力移除缓存