（四十四）Vue Router的命名路由和路由组件传参

上一篇：（四十三）Vue Router之嵌套路由

命名路由

命名路由是为路由配置项提供一个名称，以便在代码中引用该路由。通过为路由配置项添加name属性，可以为路由指定一个唯一的名称。

配置：

const router = new VueRouter({routes: [{path: '/path1',name: 'name2', // 命名路由为 'name1'component: Component1,},{path: '/path2',name: 'name2', // 命名路由为 'name2'component: Component2,},],
});

使用：

<router-link :to="{name:'name1'}"></router-link>
<router-link :to="{name:'name2'}"></router-link>

组件传参

query参数方式

参数传递

• 字符串写法

<router-link :to="`/xxx?param1=${param1}&param2=${param2}`">query跳转携带参数
</router-link>

• 对象写法

<router-link :to="{path:'/xxx',query:{param1:param1,param2:param2}}">query跳转携带参数
</router-link>

参数接收

   $route.query.id$route.query.title

params参数方式

参数传递

• 占位符形式

const router = new VueRouter({routes: [{path: '/xxx/:param1/:param2',component: Component,},],
});

<router-link :to="`/xxx/${param1}/${param2}`">params跳转携带参数
</router-link>

• 对象写法

<router-link :to="{name:'detail',params:{param1:param1,param2:param2}}">params跳转携带参数
</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

参数接收

   $route.params.id$route.params.title

props配置方式

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦，props配置将会把参数以props的方式传递到目标组件，该配置属性可以是布尔值、对象或函数

布尔值形式

如果 props 被设置为 true，把路由组件收到的所有params参数，以props传递过来。

const router = new VueRouter({routes: [{path: '/path1',props: true, // 把路由组件收到的所有params参数，以props传给Component组件。component: Component,},],
});

对象模式

props对象写法，对象中所有的数据都以props传递过来。

const router = new VueRouter({routes: [{path: '/path1',props: {param1:param1,param2:param2},component: Component,},],
});

函数模式

props函数写法，该函数返回的对象中每一组数据都会通过props传递过来，可以配合query和params使用

const router = new VueRouter({routes: [{path: '/path1',props($route){return {param1:$route.query.param1,param2:$route.params.param2}}component: Component,},],
});