15.2.2 路由匹配的语法规则 -TypeScript和Vue从入门到精通(五)

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

### 15.2.2 路由匹配的语法规则

在Vue.js项目中，尤其是在结合Vue Router构建单页面应用（SPA）时，路由匹配是核心功能之一，它决定了URL如何映射到不同的组件上。TypeScript作为JavaScript的超集，为Vue项目提供了类型安全性和更强大的开发体验。在本节中，我们将深入探讨Vue Router中路由匹配的语法规则，结合TypeScript的使用，帮助读者从入门到精通这一关键领域。

#### 1. 基本路由匹配

Vue Router通过路由表（routes array）来定义路由的映射关系。每个路由记录都是一个包含`path`和`component`（或`components`对于命名视图）的对象。基本的路由匹配是通过`path`字段实现的，它指定了URL的路径模板。

```typescript
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    // 假设About.vue是一个使用TypeScript的Vue组件
    component: () => import('@/views/About.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});
```

在上面的例子中，当访问`/`路径时，将渲染`Home.vue`组件；访问`/about`时，则渲染`About.vue`组件。

#### 2. 动态路由匹配

当需要根据URL的不同部分来动态渲染组件时，可以使用动态路由匹配。动态段被`[ ]`标记，并在组件内部通过`$route.params`来访问。

```typescript
const routes: Array<RouteRecordRaw> = [
  {
    path: '/user/:id',
    name: 'UserProfile',
    component: () => import('@/views/UserProfile.vue')
  }
];
```

在`UserProfile.vue`组件中，可以通过`this.$route.params.id`来访问动态段`id`的值。注意，在使用`history`模式时，需要确保服务器配置正确，以便对非实际文件路径的请求也能返回同一个`index.html`页面。

#### 3. 星号路由（通配符路由）

星号路由（也称为通配符路由）用于匹配所有未被前面路由规则捕获的路径。这通常用于404页面或应用中的默认页面。

```typescript
const routes: Array<RouteRecordRaw> = [
  // 其他路由...
  {
    path: '*',
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue')
  }
];
```

这样配置后，任何未匹配到其他路由的URL都将被重定向到`NotFound.vue`组件。

#### 4. 嵌套路由

嵌套路由允许我们在Vue组件内部定义子路由，实现组件的嵌套展示。这通常用于构建具有多个视图区域的复杂页面布局。

```typescript
const routes: Array<RouteRecordRaw> = [
  {
    path: '/user/:id',
    component: () => import('@/views/UserLayout.vue'),
    children: [
      {
        path: 'profile', // 注意，这里不需要`/`开头
        component: () => import('@/views/UserProfile.vue')
      },
      {
        path: 'posts',
        component: () => import('@/views/UserPosts.vue')
      }
    ]
  }
];
```

在`UserLayout.vue`组件中，你可以使用`<router-view>`来展示匹配的子路由组件。当访问`/user/123/profile`时，`UserProfile.vue`将被渲染到`UserLayout.vue`中的`<router-view>`位置。

#### 5. 路由别名

路由别名允许你定义一个路径的别名，用户可以通过不同的URL访问同一个路由。

```typescript
const routes: Array<RouteRecordRaw> = [
  {
    path: '/foo',
    component: () => import('@/views/Foo.vue'),
    alias: '/foobar' // 为/foo设置别名/foobar
  }
];
```

现在，访问`/foo`和`/foobar`都会渲染`Foo.vue`组件。

#### 6. 路由重定向

路由重定向允许你定义一个路由，当访问该路由时，自动重定向到另一个路由。

```typescript
const routes: Array<RouteRecordRaw> = [
  {
    path: '/old-path',
    redirect: '/new-path' // 重定向到/new-path
  },
  {
    path: '/new-path',
    component: () => import('@/views/NewPath.vue')
  }
];
```

#### 7. 路由守卫

虽然路由守卫不直接涉及路由匹配的语法规则，但它们是Vue Router中不可或缺的一部分，用于在路由进入、离开前后执行特定逻辑，如权限验证、页面标题设置等。

- **全局守卫**：如`beforeEach`和`afterEach`，在整个路由实例上定义。
- **路由独享守卫**：在单个路由记录上定义，如`beforeEnter`。
- **组件内守卫**：在组件内部定义，如`beforeRouteEnter`、`beforeRouteUpdate`（2.2+）、`beforeRouteLeave`。

```typescript
router.beforeEach((to, from, next) => {
  // 假设我们在这里做权限检查
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 这里可以检查用户是否已登录
    if (!isLoggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 登录后重定向到原路径
      });
    } else {
      next(); // 确保一定要调用 next()
    }
  } else {
    next(); // 确保一定要调用 next()
  }
});
```

#### 8. 路由元信息

在路由定义中，可以添加一个`meta`字段，用于存储自定义信息。这些信息可以在路由守卫、导航钩子中被访问，实现如页面标题设置、权限控制等逻辑。

```typescript
const routes: Array<RouteRecordRaw> = [
  {
    path: '/secret',
    component: () => import('@/views/Secret.vue'),
    meta: { requiresAuth: true }
  }
];
```

然后，在全局守卫中检查`meta`字段来执行相应的逻辑。

#### 结语

路由匹配的语法规则是Vue Router中构建单页面应用的基础。通过掌握这些规则，你可以灵活地定义路由映射，构建出结构清晰、功能丰富的Vue应用。结合TypeScript的使用，你还可以享受到类型安全的优势，减少因类型错误导致的bug，提升开发效率。希望本章内容能帮助你更好地理解和运用Vue Router的路由匹配功能。

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

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

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

Vue原理与源码解析

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

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

Vue3技术解密

Vue源码完全解析

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

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

Vue面试指南

VUE组件基础与实战

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