当前位置： 面试刷题>> Vue Router 中如何获取路由传递过来的参数？
在Vue应用中，Vue Router是管理页面路由的核心库，它允许我们以声明式的方式定义路由和导航。当涉及到路由参数的传递与获取时，Vue Router提供了几种方式来实现这一点，包括查询参数（query parameters）、动态路由匹配（dynamic route matching）以及命名路由搭配`params`（在嵌套路由中使用）。下面，我将以高级程序员的视角，详细解释如何在Vue Router中获取这些不同类型的路由参数，并给出相应的示例代码。
### 1. 查询参数（Query Parameters）
查询参数通常附加在URL的`?`后面，并以键值对的形式存在，如`?userId=123`。在Vue Router中，你可以通过`$route.query`对象来访问这些参数。
**示例代码**：
假设我们有一个路由定义如下，并且我们想要传递一个`userId`作为查询参数：
```javascript
// router/index.js
const routes = [
{
path: '/user',
component: UserComponent
}
];
// 在某个组件中导航到该路由
this.$router.push({ path: '/user', query: { userId: 123 } });
// 在UserComponent中获取查询参数
export default {
mounted() {
console.log(this.$route.query.userId); // 输出: 123
}
}
```
### 2. 动态路由匹配
动态路由匹配允许我们将路由路径中的一部分定义为动态片段，这样就可以根据这个片段的值来匹配不同的路由。在Vue Router中，你可以使用`:`来定义一个动态片段，并通过`$route.params`来访问其值。
**示例代码**：
```javascript
// router/index.js
const routes = [
{
path: '/user/:id',
component: UserDetailComponent
}
];
// 导航到动态路由
this.$router.push({ path: '/user/123' });
// 在UserDetailComponent中获取动态片段参数
export default {
mounted() {
console.log(this.$route.params.id); // 输出: 123
// 注意：在大多数情况下，对于`path`模式，你应该使用`$route.params`配合`*`或`:`通配符，但在`history`模式下（即默认模式），对于上述简单的`:id`动态片段，你可能需要使用`$route.params.id`的上下文是在子路由中（通过children属性定义）。
// 对于上述简单情况，实际上应该使用`this.$route.params`的父组件，即路由定义中直接包含`:id`的组件可能不会直接访问到`id`，而是需要通过`$route.params`的上下文是子路由或组件。
// 更常见的是直接通过`this.$route.params`在嵌套路由或组件中获取，但这里为了说明，我们假设`$route.params`能获取到。
// 实际上，对于`/user/:id`这样的路由，应该通过`this.$route.params`的父组件或直接在组件内通过`this.$route.params.id`访问（如果是在嵌套路由的上下文中），但在实际项目中，对于顶级路由，你可能需要依赖`$route.query`或直接将`:id`作为`props`传递给组件。
}
}
// 注意：上述关于$route.params的解释在简单场景下可能有些混淆，实际上，在顶级路由中使用`:id`时，应使用`this.$route.params.id`在嵌套路由或组件的上下文中，或直接通过props传递给组件（如果配置了props: true）。
// 在顶级路由直接使用$route.params.id可能不会得到预期结果，除非有特殊配置或使用场景。
```
### 3. 命名路由搭配`params`（嵌套路由）
在嵌套路由中，你可以通过命名路由和`params`对象来传递参数，但这种方式主要用于``中的子路由匹配，并且参数不会出现在URL中。
**示例代码**（简化版，侧重于概念）：
```javascript
// router/index.js
const routes = [
{
path: '/user/:id',
component: UserComponent,
children: [
{
path: 'profile',
name: 'user-profile',
component: UserProfileComponent,
props: true // 开启props，以便将params作为props传递给UserProfileComponent
}
]
}
];
// 导航到嵌套路由
this.$router.push({ name: 'user-profile', params: { userId: 123 } });
// 注意：这里使用params可能不正确，因为params通常用于命名路由的嵌套路由中，并且不直接通过push方法传递。
// 对于命名路由，通常我们会直接在路由定义中通过props传递参数，或者在导航时通过查询参数或其他方式传递，然后在组件中通过$route.query或props获取。
// 正确的使用可能是在组件内部通过编程式导航到嵌套路由，并在该过程中使用props传递参数，或者通过父组件直接传递props给子组件（如果使用了props: true的配置）。
// 假设UserProfileComponent通过props接收userId
export default {
props: ['userId'],
mounted() {
console.log(this.userId); // 输出: 123，如果正确传递了props
}
}
```
**总结**：
在Vue Router中获取路由参数的方式取决于你使用的参数类型（查询参数、动态路由匹配或嵌套路由的`params`）。理解这些不同方式及其适用场景对于构建高效、可维护的Vue应用至关重要。同时，注意到Vue Router的灵活性允许你以多种方式组合使用这些功能，以满足复杂的路由和导航需求。在面试中，能够清晰、准确地解释这些概念，并给出实际代码示例，将展现出你对Vue Router的深入理解和高级应用能力。