beforeRouteEnter钩子处理页面刷新问题

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

• keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
• 钩子函数的执行顺序
  （1）不使用keep-alive
  beforeRouteEnter --> created --> mounted --> destroyed

（2）使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。我们可以利用不同的钩子函数，做不同的事。务必理解上述钩子函数的执行时机和执行顺序，本教程的核心就依赖于此钩子函数
activated和deactivated是使用keep-alive后，vue中比较重要的两个钩子函数，建议详细了解下。

举例：

image.png

这里可以利用beforeRouteEnter 解决页面缓存问题：
（1）首先，路由配置中设置B页面开启缓存：

{
    path: "/createOrder/header",
    name: "createOrderHeader",
    component: createOrderHeader,
    meta: {
      keepAlive: true,    // 开启缓存
    },
  },

（2）B页面使用路由守卫,并在methods里写初始化函数

 beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.name === "outboundOrderList") {
        vm.init();   // 此处就可以代替mounted生命周期里的初始化操作
      }
    });
  },

   // 初始化函数
    init() {
      const id = this.$route.params.id;
      this.getDetail(id);
    },

（3）B页面的activated里可以写局部的数据更新处理。

activated() {
    const index = this.lineData.findIndex(
      (item) => item.stockLineId === this.material.stockLineId,
    );
    this.$set(this.lineData, index, {
      ...this.lineData[index],
      transactionQuantity: this.material.transactionQuantity,
    });
  },