【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" />