路由组件传参
关于组件传参的几种看【编程式的导航】【编程式导航】
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
使用 props 将组件和路由解耦：
取代与 $route 的耦合
// 通常写法
const User = {
template: "<div>User {{ $route.params.id }}</div>",
};
const router = new VueRouter({
routes: [{ path: "/user/:id", component: User }],
});
1
2
3
4
5
6
7
2
3
4
5
6
7
通过 props 解耦
// 组件.vue
export default {
props: ["id"],
};
// router.js 配置
const router = new VueRouter({
routes: [
{ path: "/user/:id", component: User, props: true },
// 对于包含【命名视图】的路由，你必须分别为每个命名视图添加 `props` 选项：
{
path: "/home/:id",
components: { default: Home, sidebar: Sidebar },
props: { default: true, sidebar: false },
},
],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。
布尔模式
如果 props 被设置为 true，route.params 将会被设置为组件属性。就是上面那种写法。
对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
const router = new VueRouter({
routes: [
{
path: "/promotion/from-newsletter",
component: Promotion,
props: { newsletterPopup: false },
},
],
});
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
const router = new VueRouter({
routes: [
{
path: "/search",
component: SearchUser,
props: (route) => ({ query: route.query.q }),
},
],
});
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。
请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。