15.5 关于路由传参 -TypeScript和Vue从入门到精通(五)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(五)

### 15.5 关于路由传参

在构建单页面应用（SPA）时，路由管理是一项核心功能，它决定了用户如何在不同的视图或组件之间导航。Vue.js 搭配 Vue Router 提供了强大的路由功能，使得在 Vue 应用中实现页面跳转和参数传递变得简单而高效。本章节将深入探讨在 Vue 应用中使用 Vue Router 进行路由传参的各种方式，包括查询参数（Query Parameters）、动态路由匹配（Dynamic Route Matching）、命名路由（Named Routes）以及编程式导航（Programmatic Navigation）中的参数传递。

#### 15.5.1 理解路由传参的需求

在 Web 应用中，路由传参主要用于在不同页面或组件间共享数据。这些数据可能是用户信息、筛选条件、分页参数等。根据需求的不同，我们可以选择不同的传参方式。了解何时使用何种方式，对于构建高效、易维护的 Vue 应用至关重要。

#### 15.5.2 查询参数（Query Parameters）

查询参数是通过 URL 的查询字符串（即 URL 中 `?` 后面的部分）传递的。这种方式适用于非敏感信息，如搜索条件、分页参数等。Vue Router 提供了简单的方法来在路由中设置和获取查询参数。

##### 设置查询参数

当使用 `<router-link>` 进行声明式导航时，可以通过 `to` 属性的对象形式设置查询参数：

```html
<router-link :to="{ path: '/search', query: { keyword: 'TypeScript' }}">Search TypeScript</router-link>
```

或者，在编程式导航中，使用 `router.push` 或 `router.replace` 方法时，同样可以通过对象形式设置查询参数：

```javascript
this.$router.push({ path: '/search', query: { keyword: 'Vue' }});
```

##### 获取查询参数

在目标组件中，可以通过 `$route.query` 对象访问到查询参数：

```javascript
export default {
  mounted() {
    console.log(this.$route.query.keyword); // 输出 'Vue' 或 'TypeScript'
  }
}
```

#### 15.5.3 动态路由匹配（Dynamic Route Matching）

动态路由匹配允许我们将星号（*）、参数（:paramName）或捕获所有（**）的片段嵌入到路由路径中，以实现更灵活的路由配置。这种方式通常用于基于 ID 的资源访问，如用户详情页、商品详情页等。

##### 定义动态路由

在路由配置中，可以使用 `:paramName` 的形式来定义动态路由：

```javascript
const routes = [
  { path: '/user/:id', component: UserProfile }
];
```

##### 访问动态片段

在目标组件中，通过 `$route.params` 对象访问动态片段：

```javascript
export default {
  mounted() {
    console.log(this.$route.params.id); // 访问动态路由中的 id
  }
}
```

但需要注意的是，对于使用 `path` 模式定义的动态路由，其参数实际上是通过 `$route.params` 访问的，但这要求路由配置中需要包含相应的嵌套路由或星号路由（在 Vue Router 3.x 中）。在 Vue Router 4.x 中，对于非嵌套路由的动态片段，通常推荐使用 `props` 选项将参数作为 props 传递给组件，这样可以通过组件的 props 直接访问这些参数。

```javascript
const routes = [
  {
    path: '/user/:id',
    component: UserProfile,
    props: true // 开启 props 传递
  }
];

// UserProfile 组件
export default {
  props: ['id'], // 声明接收的 prop
  mounted() {
    console.log(this.id); // 直接通过 props 访问
  }
}
```

#### 15.5.4 命名路由（Named Routes）

命名路由可以让你在定义路由时给它们命名，这样在进行路由跳转时就可以通过名字而非路径字符串来进行，这增加了代码的可读性和可维护性。

##### 定义命名路由

在路由配置中，通过 `name` 属性为路由命名：

```javascript
const routes = [
  {
    path: '/user/:id',
    name: 'userProfile',
    component: UserProfile
  }
];
```

##### 使用命名路由进行导航

在 `<router-link>` 中使用 `to` 的对象形式，并通过 `name` 属性指定路由名，配合 `params`（对于动态路由）或 `query`（对于查询参数）来导航：

```html
<router-link :to="{ name: 'userProfile', params: { id: 123 }}">Go to User 123</router-link>

```

但在编程式导航中，对于动态路由的参数，通常需要使用 `params` 进行传递，但这要求目标路由为嵌套路由的一部分。对于非嵌套路由，建议使用 `query` 或在路由定义中利用 `props` 传递。

#### 15.5.5 编程式导航中的参数传递

编程式导航指的是使用 JavaScript 代码进行路由跳转，Vue Router 提供了 `router.push`、`router.replace` 和 `router.go` 等方法来实现。在编程式导航中，参数的传递方式与声明式导航类似，但提供了更多的灵活性。

##### 使用 `router.push` 或 `router.replace` 传递参数

```javascript
// 使用 query 参数
this.$router.push({ name: 'search', query: { keyword: 'Vue' }});

// 使用 params（通常配合命名视图或嵌套路由）
// 注意：对于非嵌套路由，通常不推荐在编程式导航中直接使用 params

// 更常见的做法是使用 props 或 query
// 如果确实需要，可以考虑在路由守卫或导航守卫中处理
```

#### 15.5.6 小结

路由传参是 Vue 应用中常见且重要的功能，它允许我们在不同组件间高效地共享数据。Vue Router 提供了多种灵活的传参方式，包括查询参数、动态路由匹配、命名路由以及编程式导航。在实际开发中，应根据具体需求选择合适的传参方式，并注意路由配置的细节，以确保应用的路由系统既高效又易于维护。

通过本章节的学习，你应该能够掌握在 Vue 应用中使用 Vue Router 进行路由传参的各种方法，并能在实际项目中灵活运用这些技术来优化你的应用。

该分类下的相关小册推荐：

Vue.js从入门到精通(三)

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(二)

Vue面试指南

Vue原理与源码解析

移动端开发指南

Vue.js从入门到精通(四)

VUE组件基础与实战

Vue源码完全解析

TypeScript和Vue从入门到精通(四)

TypeScript和Vue从入门到精通(一)