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

一、说明

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

2、比如

小组【Vue】 vue | 页面跳转,携带参数_第1张图片

 小组成员

二、解决方案

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


    

改为

示例图:

【Vue】 vue | 页面跳转,携带参数_第2张图片

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

你可能感兴趣的:(Vue,vue)