15.2.1 路由参数匹配 -TypeScript和Vue从入门到精通(五)

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

### 15.2.1 路由参数匹配

在Vue.js项目中，特别是结合TypeScript使用时，路由管理成为了构建单页面应用（SPA）不可或缺的一部分。Vue Router作为Vue官方的路由管理器，提供了丰富的功能来支持各种路由需求，其中路由参数匹配是理解和实现动态路由、导航守卫等高级功能的基础。本章将深入探讨Vue Router中的路由参数匹配机制，包括动态路由匹配、星号路由匹配以及命名路由参数，并结合TypeScript的类型安全特性，展示如何在Vue与TypeScript项目中高效利用这些功能。

#### 15.2.1.1 动态路由匹配

动态路由匹配允许我们在路由路径中嵌入“动态片段”，这些片段可以匹配到任意值，并将其作为参数传递给路由组件。这在处理如用户个人资料页面（`/user/1`、`/user/2`等）时非常有用。

##### 定义动态路由

在Vue Router中，你可以使用星号（`*`）或冒号（`:`）来定义动态片段。但在实践中，冒号（`:`）更常用，因为它提供了更明确的语义。例如：

```javascript
// TypeScript中的Vue Router配置示例
const routes: Array<RouteConfig> = [
  {
    path: '/user/:id',
    component: UserProfile,
    props: true  // 启用props将路由参数作为props传递给组件
  }
];

const router = new VueRouter({
  routes
});
```

在上面的代码中，`:id`是一个动态片段，它可以匹配任何路径中该位置的值，并将这个值作为`params`对象的一部分传递给`UserProfile`组件（如果启用了`props: true`）。

##### 访问动态片段

在组件内部，你可以通过`$route.params`（对于命名路由匹配）或`$route.params.id`（对于上述动态路由匹配）来访问这些动态片段的值。但是，请注意，对于上述简单的动态路由匹配，实际上应该使用`$route.params`的父对象`$route.query`（如果片段是通过查询字符串传递的）或`$route.params`（对于带星号或冒号的动态片段，但这里有个常见的误解——在默认配置下，`:`动态片段的值应通过`$route.params`访问，但在使用`props: true`时，Vue Router会自动将其作为props传递给组件，而不是直接放在`$route.params`中）。然而，在大多数使用`props: true`的案例中，你将在组件的props中直接接收这些值。

为了更清晰地展示这一点，如果`UserProfile`组件这样定义：

```typescript
// UserProfile.vue
<template>
  <div>
    <h1>User ID: {{ id }}</h1>
  </div>
</template>

export default Vue.extend({
  props: ['id'],
  // 组件的其他部分...
});
</script>
```

这里，`id`直接从父路由的props中接收，无需直接访问`$route`对象。

#### 15.2.1.2 星号路由匹配（通配符匹配）

星号（`*`）路由匹配提供了更灵活的路由匹配能力，它可以匹配任意路径，并将其余部分作为参数传递给组件。这在处理具有复杂嵌套路径的路由时特别有用。

##### 定义星号路由

```javascript
const routes: Array<RouteConfig> = [
  {
    path: '/path/*',
    component: CatchAllComponent
  }
];
```

在这个例子中，`/path/*`会匹配所有以`/path/`开头的路径，并将剩余部分作为`$route.params.pathMatch`（或你定义的任何名字，如果你使用了命名参数）传递给`CatchAllComponent`组件。但是，请注意，Vue Router 3.x中并没有直接通过`$route.params`暴露星号匹配的部分，而是需要通过`$route.params`的特定属性（如果你在路由定义中使用了命名参数）或`$route.match.params`（对于命名视图或嵌套路由）来访问。然而，对于星号路由，你通常会通过`$route.path`（整个路径）和手动解析或使用正则表达式来访问匹配的部分。

Vue Router 4.x引入了对星号路由参数更直接的支持，但基本概念仍然相同：你需要在路由定义中明确如何处理这些参数。

#### 15.2.1.3 命名路由与参数

命名路由是Vue Router的一个强大特性，它允许你通过名称而不是URL路径来引用路由。当与路由参数结合使用时，命名路由可以提供更清晰、更易于维护的代码。

##### 定义命名路由

```javascript
const routes: Array<RouteConfig> = [
  {
    path: '/user/:id',
    name: 'userProfile',
    component: UserProfile,
    props: true
  }
];
```

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

在Vue组件中，你可以使用`router-link`组件或编程式导航（如`this.$router.push`）结合命名路由和参数进行导航：

```html

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

<!-- 注意：对于动态路由和命名路由，通常使用query或params的选择取决于路由配置（如是否包含`history`模式、是否嵌套路由等）
// 但上面的例子使用了params，这是不正确的，对于非嵌套路由的命名路由，应使用query或path来传递参数

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

this.$router.push({ name: 'userProfile', query: { id: 123 }});
```

然而，需要注意的是，`params`通常用于命名视图的嵌套路由中，而`query`用于URL的查询字符串。在上面的例子中，我们实际上应该使用`query`而不是`params`，因为我们是在URL的查询字符串中传递参数，而不是在命名视图的嵌套路由中。

#### 总结

路由参数匹配是Vue Router中一个非常重要的概念，它允许我们构建动态、灵活的路由系统。通过理解动态路由匹配、星号路由匹配以及命名路由参数的使用，你可以更好地控制Vue.js应用的路由行为，并在TypeScript项目中利用类型安全特性来避免常见的错误。在实际开发中，合理地设计和使用路由参数匹配，将有助于提高应用的可用性和可维护性。

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

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

VUE组件基础与实战

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

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

Vue3技术解密

Vue源码完全解析

vue项目构建基础入门与实战

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

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

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

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

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