【Vue】 vue | 页面跳转，携带参数

一、说明

1、数据表三级级联时，页面跳转默认根据父级ID筛选

2、比如

小组

 小组成员

二、解决方案

1、父页面添加按钮并设置路由

1）设置按钮

去子页面

2）setPoint方法

toSub(row) {
    // 跳转到子页面
    this.$router.push({path: '/childPageUrl',query:{id:row.id}});
}

2、子页面接收参数

1）watch监听路由

watch: {
    $route() {
      this.parentId = this.$route.query && this.$route.query.id;
    }
  },

说明1： 在监听里面设置，parentId需要再data中定义

说明2： this.$route.query对应父页面的push里面的query

2）默认设置值

created() {
    // 从路由中取参数
    this.parentId = this.$route.query.id||null;
    // 赋值给查询参数
    this.queryParams.parentId = this.parentId ;
    // 查询列表
    this.getList();
},

说明1： 示例代码只给出了默认查询，如果要新增，编辑都要赋值，自行赋值给相应的data字段即可，比如： this.form.parentId  = this.parentId

3）跳转源脚本跳转

this.$router.push({path: '/child',query:{parentId:this.parentId}});

~~

 3、其他说明

1）上面这种方式，父页面跳转子页面，是通过get方式加参数的方式，比如:

/childPageUrl?id=${id}

2）父页面切换数据时，可能子页面数据没有切换，这个可能是由于缓存导致的

3）可以关闭缓存功能

位置参考：

src/layout/AppMain.vue

将

改为

示例图：

 说明1： 用的项目是RuoYi的前后端分离版本，不匹配请自寻检索解决方案