vue-router 动态路由匹配

àì夳堔傛蜴生んèń 2022-12-26 08:24 90阅读 0赞

### 目录 ###

*  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`）