目录

1. 动态匹配路由的基本用法2. 路由组件传递参数2.1 props 的值为布尔类型2.2 props 的值为对象类型2.3 props的值为函数类型

1. 动态匹配路由的基本用法

【应用场景】：通过动态路由参数的模式进行路由匹配。

var router = new VueRouter({routes: [// 动态路径参数 以冒号开头{path: '/user/:id', component: User }] })

即在路由规则中，把动态的部分在前面加上冒号（:）， 冒号就代表当前这个位置匹配的是动态参数，匹配成功后，在 User组件中就可以访问到当前匹配到的 id 值。

那么，如何来访问这个id值呢？请看下面的语法，我们是通过$route.params这个对象 获取到这个动态匹配到的路由参数。

const User = {// 路由组件中通过 $route.params 获取路由参数template: '<div>User {{ $route.params.id }}</div>'}

2. 路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。

2.1 props 的值为布尔类型

const router = new VueRouter({routes: [// 如果 props 被设置为 true，route.params 将会被设置为组件属性{path: '/user/:id', component: User, props: true}]})const User = {props: ['id'], // 使用 props 接收路由参数template: '<div> 用户 ID：{{ id }} </div>' // 使用路由参数}

props: true：表示给这个规则开启了传参；

props: ['id']：定义了 id 这个路由参数。

2.2 props 的值为对象类型

const router = new VueRouter({routes: [// 如果 props 是一个对象，它会被按原样设置为组件属性{path: '/user/:id', component: User, props: {uname: 'lisi', age: 12 }}]})const User = {props: ['uname', 'age'],template: ‘<div>用户信息：{{uname + '---' + age}}</div>'}

2.3 props的值为函数类型

const router = new VueRouter({routes: [// 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参{path: '/user/:id',component: User,props: route => ({uname: 'zs', age: 20, id: route.params.id })}]})const User = {props: ['uname', 'age', 'id'],template: ‘<div>用户信息：{{uname + '---' + age + '---' + id}}</div>'}

注：,props: route =>这里的route即是路由中的动态参数对象，:id中有几个参数项，则route中就有几个参数值。那么，在箭头函数的函数体中，可以返回一个props对象。id值就可通过route动态匹配:id获取（id: route.params.id）