vue2路由跳转和浏览器回退时弹窗的开启

前言

我这里有个需求是在A页面中的详情弹框中，点击按钮跳转到B页面的新增弹框中，并把A页面中的数据带过去填到B页面新增的form表单中，此时如果点击了浏览器的回退按钮，就会重新回到A页面中刚才打开的那条数据的详情弹框。

一、跳转到B页面的新增弹框具体流程

1.在A页面中的详情弹框中点击按钮触发addWorkOrder方法。

    async addWorkOrder(row) {
    	//把这条数据的id存到vuex中，以便于在后续浏览器回退到该页面时，通过此id正确打开该条数据的详情弹框
      this.$store.commit("productDesignIdChange", this.detail.id || '');
      //通过router的push方法跳转到B页面
      //此处用async，await以防跳转到B页面了，但是不能正常打开弹框
      await this.$router.push("B页面路由路径");
      //通过全局事件总线的$emit方法，触发B页面的方法，从而实现打开B页面的新增弹框
      this.$bus.$emit("releaseWorkOrder", [this.detail, row, "1"]);
    },

2.在B页面中的mounted钩子中，监听A页面中的$emit方法所触发的事件，如果监听到了，就去执行releaseWorkOrder方法

  mounted() {
    this.$bus.$on("releaseWorkOrder", this.releaseWorkOrder);
  },
  beforeDestroy() {
    this.$bus.$off("releaseWorkOrder");
  },

3.在此方法中处理从A页面中通过全局事件总线传来的方法，并同步到form表单中

    releaseWorkOrder(data) {
    	//。。。
    	//处理数据的代码
    	//。。。
    	
    	//然后调用你自己之前写的新增方法，去打开弹窗之类的操作。。。
      this.handleAdd();
    },

二、返回A页面时打开详情弹框

这里需要用到路由守卫去控制vuex的id，根据是否有id去判断是否打开详情弹框

// 全局路由前置守卫
router.beforeEach((to, from, next) => {
	//如果来的路由路径和去往的路由路径都不是A页面，那么把vuex中的id数据重置为''
  if (from.path !== '/A' && to.path !== '/A') {
      store.commit("productDesignIdChange", '');
  }
   next();
});

2.这两个路由首位是写到A页面中的。

  //在路由进入该组件之前被调用。
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      let productDesignId = vm.$store.state.productDesignId;
      //进入A页面时判断vuex中的id是否为''
      if (productDesignId) {
      //如果不为空，则调用showRow方法去打开弹框展示数据。
        vm.showRow({ id: productDesignId });
        //并且再此把vuex中的id重置为''，防止后面通过其他方法进到该组件时页打开了弹窗。
        vm.$store.commit("productDesignIdChange", '');
      }
    });
  },