学习完整课程请移步 互联网 Java 全栈工程师
本节视频
概述
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。此时我们就需要传递参数了；
使用路径匹配的方式
修改路由配置
{path: '/user/profile/:id', name:'UserProfile', component: UserProfile}
说明：主要是在 path 属性中增加了 :id 这样的占位符
传递参数
router-link
<router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>
说明：此时我们将 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径；
代码方式
this.$router.push({ name: 'UserProfile', params: {id: 1}});
接收参数
在目标组件中使用
{{ $route.params.id }}
来接收参数
使用 props 的方式
修改路由配置
{path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true}
说明：主要增加了 props: true 属性
传递参数
同上
接收参数
为目标组件增加 props 属性，代码如下：
export default {
props: ['id'],
name: "UserProfile"
}
模板中使用
{{ id }}
接收参数
