vue複数のルートは同じページを使って、nameでパラメータを判断して、ページデータをレンダリングします.
3603 ワード
項目中、複数ページのデータ内容が同じであることが分かりました.データを要求するパラメータが違っているだけで、同じコンポーネントを使ってレンダリングすることができます.
ここの取引先のリスト/私が担当しているの/私が参加しているのは同じコンポーネントを使っています.
フック関数でルートnameを判断し、要求パラメータを変更して異なるデータ内容を得ることができます.
ここで注意すべき点は三つです.
1.ルート設定
ルートの設定には同じコンポーネントを使用しますが、それぞれのnameを定義します.
2.フック関数はルートnameがパラメータを修正したと判断したり、dataが直接に説明した時に判断します.
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.トランシーバーウオッチでルートを監督し、道理は第二歩と同じで、目的も同じです. 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 },