vue 路由返回 go(-1) 携带参数

使用场景

• 存在一个公共页面 FormPage，封装多种表单组件，多种渠道都会跳转到 FormPage，根据路由传参不同，展示不同的表单组件。
• 表单内容提交后，跳转到结果页 FormResult，结果页点击返回重填，返回表单页 FormPage。
• 在 FormPage 页面需要判断是从渠道页进来的（新增操作），还是从 FormResult 返回回来的（编辑操作），这就需要在 FormResult 返回到 FormPage 的时候，有一个特殊的标识。
  

起初的思想

• 获取到 FormPage 的路由参数 queryAll，在表单填完后，跳转到 FormResult 的时候，将queryAll 携带过去。
• 在 FormResult 跳转回 FormPage 的时候，再携带着 queryAll 跳转回来。并且多携带一个参数 source，作为标识。
• 弊端：多种渠道携带路由参数不同，两个页面互相跳转时，需要判断传递的参数又杂又乱。

利用兄弟组件传值

• 创建一个实例，用来实现兄弟组件之前的传值

// busEvent.js
import Vue from 'vue'
 
/**
 * 非父子组件传值
 */
var BusEvent = new Vue({});
export default BusEvent;

• 结果页返回之前，触发兄弟事件

<template>
    <div class="formResult">
        <el-button type="primary" @click="goBack">返回重填</el-button>
    </div>
</template>
<script>
import BusEvent from "../util/busEvent";
export default {
    data() {
        return {
            pageId: null,
        };
    },
    mounted() {
        this.getResult();
    },
    methods: {
        getResult() {
            // 模拟接口，获取到了表单提交成功后的唯一标识id
            // 返回重填的时候，需要带回去，提交时，就可以对旧数据进行覆盖
            this.pageId = "12138";
            console.log(
                "%c进入了结果页，获取到了表单提交后的标识：" + this.pageId,
                "color: green;font-size: 20px;font-weight: bold;"
            );
        },
        goBack() {
            console.log(
                "%c准备返回表单页",
                "color: pink;font-size: 20px;font-weight: bold;"
            );
            // 返回上一页之前，先触发兄弟组件的事件
            BusEvent.$emit("paperId", this.pageId);
            this.$router.go(-1);
        },
    },
};
</script>

• 表单页引入 bus ，用于监听事件

<template>
    <div class="formPage">
        <el-form ref="form" :model="form" label-width="80px">
            
        </el-form>
    </div>
</template>
<script>
import BusEvent from "../util/busEvent";
export default {
    data() {
        return {
            form: {},
        };
    },
    mounted() {
        this.getQuery();
        // 监听兄弟事件
        BusEvent.$on("paperId", (data) => {
            this.initDetail(data);
        });
    },
    methods: {
        getQuery() {
            console.log("路由携带的参数", this.$route.query);
            // 根据携带过来的参数，判断 form 表单中，需要展示哪些表单项
        },
        onSubmit() {
            this.$router.push({
                path: "/formResult",
                query: {},
            });
        },
        // 渲染之前填写过的内容
        initDetail(id) {
            console.log("%c获取到了结果页传递过来的值:" + id, "color: red;font-size: 20px;font-weight: bold;");
            // 使用 id 渲染填写过的数据
        },
    },
};
</script>

展示效果

• 第一次进入 FormPage 页，获取到了路由携带的参数，此时并没有监听到兄弟组件的方法 paperId ，即为新增操作。
  
• 填写表单内容完成后，点击立即创建按钮，跳转到 FormResult 页面，模拟接口效果，获取到了表单提交的唯一标识。
  
• 点击返回重填按钮，触发 paperId 方法。
• 跳转到 FormPage 页面，获取到了路由参数，并且监听到了 paperId 方法，且获取到了上次提交的唯一标识。即此次表单内容的填写为更新操作。
  

用法总结

// 第一步-----创建一个公共实例
import Vue from 'vue'
var BusEvent = new Vue({});
export default BusEvent;


// 第二步
// 在需要触发事件的地方，引入实例，触发事件，并且传值
import BusEvent from "../util/busEvent";
BusEvent.$emit("paperId", this.pageId);


// 第三步
// 在需要监听事件的地方，引入实例，监听事件
import BusEvent from "../util/busEvent";
BusEvent.$on("paperId", (data) => {
    // 执行操作
});