vue多个路由使用同一个页面,通过name判断参数,渲染页面数据

项目中,发现有多个页面的数据内容相同,只是请求数据的参数不同,就可以使用同一个组件来渲染

　　这里的客户列表 / 我负责的 / 我参与的 都使用同一个组件,不同点在请求数据的参数

　　可以看到,通过钩子函数,判断路由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 },