項目中,發現有多個頁面的數據內容相同,只是請求數據的參數不同,就可以使用同一個組件來渲染
這里的客戶列表 / 我負責的 / 我參與的 都使用同一個組件,不同點在請求數據的參數
可以看到,通過鈎子函數,判斷路由name,從而修改請求參數,來得到不同的數據內容
這里需要注意三個地方:
1.路由設置
配置路由時,使用相同組件,但是要定義好各自的name
1 {
2 path: "customer_list", 3 component: () => import("@/views/groupManagement/customer_list/index"), 4 name: "customer_list", 5 meta: { 6 title: "customer_list", 7 icon: "", 8 noCache: true 9 } 10 }, 11 { 12 path: "my_responsible", 13 component: () => import("@/views/groupManagement/customer_list/index"), 14 name: "my_responsible", 15 meta: { 16 title: "my_responsible", 17 icon: "", 18 noCache: true 19 } 20 }, 21 { 22 path: "my_partake", 23 component: () => import("@/views/groupManagement/customer_list/index"), 24 name: "my_partake", 25 meta: { 26 title: "my_partake", 27 icon: "", 28 noCache: true 29 } 30 },
2.鈎子函數判斷路由name修改參數,或者直接在data申明的時候判斷
判斷name,修改請求參數
1 created() {
2 if (this.$route.name == "my_partake") { 3 this.filter.is_my = 0; 4 this.filter.is_join = 1; 5 } else if (this.$route.name == "my_responsible") { 6 this.filter.is_my = 1; 7 this.filter.is_join = 0; 8 } else if(this.$route.name == "customer_list") { 9 this.filter.is_my = 0; 10 this.filter.is_join = 0; 11 } 12 this.getTableData(); 13 },
1 // 搜索條件
2 filter: {
3 keywords: "", 4 start_date: "", 5 end_date: "", 6 status: "", 7 goods_cat_id: "", 8 type: "plan_name", 9 plan_type: "-1", 10 is_my: this.$route.name == "planList" ? "0" : "1" 11 //這里是判斷name修改參數 12 },
3.通過偵聽器watch 監聽路由,道理同第二步一樣,目的也一樣
1 watch: {
2 $route(to, from) { 3 this.filter.is_my = ""; 4 this.filter.is_join = ""; 5 this.table.total = 0; 6 this.table.currentPage = 1; 7 this.table.pageSize = 20; 8 if (to.name == "my_partake") { 9 this.filter.is_my = 0; 10 this.filter.is_join = 1; 11 } else if (to.name == "my_responsible") { 12 this.filter.is_my = 1; 13 this.filter.is_join = 0; 14 } else if(to.name == "customer_list") { 15 this.filter.is_my = 0; 16 this.filter.is_join = 0; 17 } 18 this.getTableData(); 19 } 20 },