在 Vue 2 中，路由参数是一种在不同路由和组件之间传递数据的方法。它们用于创建动态 URL，可用于检索特定信息。Vue 2 中使用路由参数有两种主要方式：
1. 使用 params 对象：
params 对象是 route 对象的属性，包含当前路由的所有动态参数。您可以使用 this.$route.params 属性从组件内部访问 params 对象。
例如，考虑以下路由定义：
JavaScript
const routes = [
{
path: '/users/:id',
component: UserDetailComponent
}
]
在这个例子中，:id 参数是一个动态参数，可用于检索要显示的用户 ID。您可以使用以下代码从 UserDetailComponent 组件内部访问此参数：
JavaScript
const id = this.$route.params.id
2. 使用 query 对象：
query 对象是 route 对象的属性，包含当前路由的所有查询参数。查询参数通常用于过滤或排序数据。您可以使用 this.$route.query 属性从组件内部访问 query 对象。
例如，考虑以下 URL：
/users?sortBy=name&sortOrder=asc
在这个例子中，sortBy 和 sortOrder 是查询参数。您可以使用以下代码从组件内部访问这些参数：
JavaScript
const sortBy = this.$route.query.sortBy
const sortOrder = this.$route.query.sortOrder
将参数传递给路由：
当您导航到路由时，还可以向它们传递参数。有两种方法可以做到这一点：
1. 使用 router.push 方法：
router.push 方法可用于导航到新路由。您可以通过将对象作为 router.push 方法的第二个参数传递来向路由传递参数。
例如，以下代码将导航到 /users/:id 路由并传递要显示的用户 ID：
JavaScript
this.router.push({
path: '/users/' + this.userId
})
2. 使用 router-link 组件：
router-link 组件是 Vue 组件，可用于创建指向其他路由的链接。您可以通过将 router-link 组件的 to 道具设置为对象来向路由传递参数。
例如，以下代码将创建指向 /users/:id 路由的链接并传递要显示的用户 ID：
HTML
查看用户
请谨慎使用代码。
content_copy
响应路由参数更改：
您可以使用 watch 选项来响应路由参数的更改。watch 选项允许您监视属性的更改并在属性更改时执行回调函数。
例如，以下代码将监视 this.$route.params.id 属性并在 ID 更改时更新 user 数据属性：
JavaScript
watch: {
'$route.params.id': function (newValue, oldValue) {
this.getUser(newValue)
}
}