Vue中this.$router.push（参数） 实现页面跳转过程中参数传递问题_vue3 this.$router.push 能跳转页面 参数传递不过去

问题说明：

根据两个字段进行查询，并从返回过来的数据中点击抽取按钮，跳转到选手详情页
传参，页面跳转代码：

this.$router.push({
        name: "Drawingdetil",
        params: {
          schoolId: id,
          xuekeId: ids,
          xsType: this.xsType,
          batchId: ide,
          xueduanName: this.xueduan,//学段
          xuekeName: this.xueke//学科
        },
1
2
3
4
5
6
7
8
9
10

详情页接收：

mounted() {
    this.dataForm.batchId = this.$route.params.batchId;
    this.xsType = this.xsType;
    this.dataForm.xuekeId = this.$route.params.xuekeId;
    this.dataForm.schoolId = this.$route.params.schoolId;
    this.xueduan = this.$route.params.xueduanName;//学段
    this.xueke = this.$route.params.xuekeName;//学科

    this.getDataList();
  },
1
2
3
4
5
6
7
8
9
10

第一次点击抽取进入详情页时是没有问题的，但是返回抽取页面，切换学科学段，再次点击抽取，问题来了：如果上一次抽取是小学语文，下一次换成初中数学，会发现传递的参数依然是小学语文。


解决时发现我接收参数部分的代码写在了mounted()方法里面，反复测试发现，写在mounted()方法里面的打印数据只打印了一次.

vue中的mounted:

mounted()方法只在第一次进入该页面时调用，所以之后再改变需要传递的参数，即使参数已经修改，但是接收的还是上一次传递的参数。

解决方法：

添加监听

watch: {
    $route: {
      handler() {
        // console.log("999999999999");
        this.dataForm.batchId = this.$route.params.batchId;
        this.xsType = this.xsType;
        this.dataForm.xuekeId = this.$route.params.xuekeId;
        this.dataForm.schoolId = this.$route.params.schoolId;
        this.xueduan = this.$route.params.xueduanName;
        this.xueke = this.$route.params.xuekeName;
        //深度监听，同时也可监听到param参数变化
      },
      deep: true,
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
就酱.@_@