Vue 使用props为路由组件传参

---

一、使用props传参

在组件内想要获取到路由的参数，需要使用 $route.params 或 $route.query 语法获取，这两者分别对应了params，query这两种参数类型。
在组件内为获取路由参数需要大量使用到 $route，这使得组件与路由紧密耦合，只能使用特定的URL大大限制了组件的灵活性，为了解决这一问题，可以通过 props 配置来对组件进行传参，降低组件与$route的耦合度。

现在有一个顾客点餐的场景，根据路由将菜品名传入，并在页面中显示对应的价格。

{
    path: "/orderfood/:foods", component: {
        data() {
            return {
                food_list: new Map([
                    ["beef", 99], ["potato", 2.33], ["tomato", 3], ["banana", 8.99], ["ananas", 3.22],
                    ["cabbage", 1.99], ["durian", 109]
                ]),
            }
        },
        template: "<p>菜品价格：{{ food_list.get($route.params.foods) }}</p>",
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

👆将上面的代码替换成下面👇

{
    path: "/orderfood/:foods", props: true, component: {
        data() {
            return {
                food_list: new Map([
                    ["beef", 99], ["potato", 2.33], ["tomato", 3], ["banana", 8.99], ["ananas", 3.22],
                    ["cabbage", 1.99], ["durian", 109]
                ]),
            }
        },
        props: ["foods"],
        template: "<p>菜品价格：{{ food_list.get(foods) }}</p>",
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这么做的好处是，允许在任何地方使用该组件，使得该组件更容易重用和测试。

---

二、布尔模式

在 一、使用props传参 的演示代码所使用的就是布尔模式。当 props 被设置为 true 时，route.params 将被设置为组件的 props，两者参数名（键）保持一致。

{
    path: "/demo/:id/:name/:title", props: true, component: {
        props: ["id", "name", "title"],
        template: "<ul><li>{{ id }}</li><li>{{ name }}</li><li>{{ title }}</li></ul>"
    }
}
1
2
3
4
5
6

---

三、命名视图

多个组件的话，需使用对象的方式，为每个命名视图定义 props 配置。

{
    path: "/demo/:id/:name/:title",
    components: {default: Foo, tabBar: tabBar},
    // 对每个命名视图进行单独配置
    props: {default: true, tabBar: false}
}
1
2
3
4
5
6

Url: http://localhost:8080/demo/1/罗翔/张三一生之敌

值得注意的是，使用命名视图的话得在 <router-view></router-view> 路由视图中添加名称。

---

四、对象模式

直接将对象中的元素作为 prop 传递给组件，写的是什么组件将拿到什么，这对于 props 是静态的时候很有用。

{
	path: "/demo",
	 component: {
	     template: `<ul><li>{{id}}</li><li>{{name}}</li><li>{{title}}</li></ul>`,
	     props: ["id", "name", "title"]
	 },
	props: {id: 1, name: "张三", title: "罗翔说刑法"},
}
1
2
3
4
5
6
7
8

---

五、函数模式

函数模式十分强大，在此模式下可以对 prop 进行预处理，可自定义返回参数，将 query 参数进行处理。
但不能对此模式过于依赖，像将参数类型转换这种操作应封装在组件内部，以保证组件的复用性，尽量保持 props 函数为无状态的。

{
    path: "/demo/:id/:name/:title",
    component: {
        template: `<ul>
            <li>{{id}}</li>
            <li>{{name}}</li>
            <li>{{title}}</li>
            <li>{{params}}</li>
            <li>{{details}}</li>
        </ul>`,
        props: ["id", "name", "title", "params", "details"]
    },
    props: route => {
    	// 获取 params 类型参数
        const {id, name, title} = route.params;
        // 获取Url?号后的 query 参数
        const {params} = route.query;
        return {params, id, name, title, details: "函数路由"}
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

函数模式下需返回对象类型，返回对象写法与对象模式下一致

---

六、兼容性

---

参考资料💕

• 官方手册
  • vue-route 路由的匹配语法
  • vue-route 路由组件传参

---

相关博客🍗

• 《JavaScript ES6 奇妙的Symbol类型(╹ڡ╹ )》
• 《Javascript ES6集合（SET）类型✪ ω ✪》