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   },