2024年4月5日发(作者：)

vue route参数

Vue路由参数是指在路由跳转时，传递给目标组件的数据。这些

参数可以在组件中使用 $route 对象来获取。

在 Vue Router 中，有两种类型的路由参数：动态路由参数和查

询参数。

1. 动态路由参数

动态路由参数是指在路由路径中包含变量的参数。例如，我们可

以定义如下路由：

```javascript

const routes = [

{

path: '/user/:id',

component: User

}

]

```

在这个路由中，:id 就是动态路由参数。例如，访问 /user/123，

其中 123 就是动态路由参数 id 的值。

在组件中使用 $ 对象来获取动态路由参数。例如，

在 User 组件中获取 id 参数的值：

```javascript

export default {

- 1 -

mounted() {

(this.$) // 打印动态路由参数

id 的值

}

}

```

2. 查询参数

查询参数是指在路由路径后面以 ? 开头的参数。例如，我们可

以定义如下路由：

```javascript

const routes = [

{

path: '/search',

component: Search

}

]

```

在这个路由中，我们可以通过在路由路径后面添加查询参数来传

递数据。例如，访问 /search?q=vue，其中 q 就是查询参数的键，

vue 就是其值。

在组件中使用 $ 对象来获取查询参数。例如，在

Search 组件中获取 q 参数的值：

- 2 -

```javascript

export default {

mounted() {

(this.$.q) // 打印查询参数 q 的值

}

}

```

总结

路由参数是 Vue Router 中非常重要的一个功能，能够实现组件

之间的数据传递。在使用路由参数时，需要注意动态路由参数和查询

参数的区别，以及在组件中如何获取这些参数。

- 3 -