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

一、说明

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

2、比如

小组

 小组成员

二、解决方案

1、父页面添加按钮并设置路由
1）设置按钮
<el-button
    size="mini"
    type="text"
    icon="el-icon-check"
    @click="toSub(scope.row)"
    v-hasPermi="['biz']"
    >去子页面</el-button>
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、其他说明
1）上面这种方式，父页面跳转子页面，是通过get方式加参数的方式，比如:
/childPageUrl?id=${id}
2）父页面切换数据时，可能子页面数据没有切换，这个可能是由于缓存导致的
3）可以关闭缓存功能
位置参考：
src/layout/AppMain.vue
将
<keep-alive :include="cachedViews">
    <router-view :key="key" />
</keep-alive>
改为
<router-view :key="key" />