前言

我这里有个需求是在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", '');}});},