凡科建站官网 网络服务,抚顺 网站建设,泸州高端网站建设公司,苏州有哪些好的互联网公司文章目录 前言一、跳转到B页面的新增弹框具体流程二、返回A页面时打开详情弹框 前言
我这里有个需求是在A页面中的详情弹框中#xff0c;点击按钮跳转到B页面的新增弹框中#xff0c;并把A页面中的数据带过去填到B页面新增的form表单中#xff0c;此时如果点击了浏览器的回… 文章目录 前言一、跳转到B页面的新增弹框具体流程二、返回A页面时打开详情弹框 前言
我这里有个需求是在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页面//此处用asyncawait以防跳转到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, );}});},
