vuerouter动态路由传参

VueRouter是Vue.js官方的路由器。它能够让开发者非常方便地使用Vue.js进行单页应用（Single Page Application）开发。在VueRouter中，路由配置可以通过静态路由和动态路由实现，同时，传递参数也是非常容易的。本文主要探讨VueRouter的动态路由传参。

动态路由是指在路由配置中，URL的一部分被视为参数，这种类型的路由可以非常方便地处理带有参数的URL请求。VueRouter可以通过两种方式实现动态路由传参：一种是用params传参，另一种是用query传参。

### params传参

params传参是通过在路由配置中使用动态路径参数来传递参数。例如：

```javascript

const router = new VueRouter({

routes: [

{

path: '/user/:id',

component: User

}

]

})

```

在上述的路由配置中，`:id`是动态的路径参数。我们可以在User组件中通过this.$route.params.id来获取id值。

```javascript

Vue.component('User', {

template: '

'

})

```

如果使用了嵌套路由，例如：

```javascript

const router = new VueRouter({

routes: [

{

path: '/user/:id',

component: User,

children: [

{

path: 'profile',

component: UserProfile

}

]

}

]

})

```

那么在UserProfile组件中，我们同样可以使用 `$route.params.id` 来获取id值。

```javascript

Vue.component('UserProfile', {

template: '

'

})

```

### query传参

query传参是通过URL的查询参数来传递参数。例如：`/user?id=123`。在路由的配置中，我们可以使用 `props` 属性来获取查询参数。例如：

```javascript

const router = new VueRouter({

routes: [

{

path: '/user',

component: User,

props: (route) => ({ query: route.query })

}

]

})

```

注意：在URL中，查询参数总是以 `?` 开头。例如：`/user?id=123`。在User组件中，我们可以通过this.$route.props.query来获取查询参数。例如：

```javascript

Vue.component('User', {

props: ['query'],

template: '

'

})

```

### 总结

VueRouter的动态路由传参方式非常灵活，可以通过params和query来进行参数传递。使用params传参时，可以通过动态路径参数来进行参数传递。使用query传参时，则是通过URL的查询参数来传递参数。无论是哪种方式，VueRouter都提供了非常便捷的方法来获取参数。

###

【关键词】VueRouter，动态路由，params传参，query传参。