构建一个Vue 3 + TS + Node.js 后台管理系统（第 18 篇）：打造前端路由

在前几篇文章中，我们已经完成了接口方法、类型和 Axios 的封装。现在，我们将踏上构建前端路由的征程。

为什么要有路由？

路由是将用户请求映射到特定处理程序的机制。它允许我们创建具有多个页面和功能的动态单页面应用程序 (SPA)。在我们的后台管理系统中，路由将帮助我们导航到不同的页面，例如用户管理、产品管理和订单管理。

构建 Vue 3 路由

在 Vue 3 中，我们可以使用 vue-router 库来管理路由。该库提供了一系列强大的特性，例如：

• 嵌套路由
• 动态路由
• 路由守卫
• 懒加载

安装 vue-router

首先，我们需要安装 vue-router：

npm install vue-router

在 main.ts 文件中，我们导入 vue-router 并将其安装到 Vue 实例中：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home }
  ]
})

app.use(router)

创建路由组件

接下来，我们需要创建路由组件。每个路由组件都对应一个特定的页面或视图。例如，我们的 Home 组件将对应于我们的主页：

<template>
  <h1>Home</h1>
</template>

<script>
export default {
  name: 'Home'
}
</script>

定义路由

在 main.ts 文件中，我们在 createRouter 函数中定义了路由：

routes: [
  { path: '/', component: Home }
]

这表示当用户访问网站的根路径（即 /）时，他们将看到 Home 组件。

嵌套路由

嵌套路由允许我们创建层次结构化的路由。例如，我们可以创建子路由，用于用户管理页面：

routes: [
  {
    path: '/users',
    component: () => import('./views/Users.vue'),
    children: [
      { path: '', component: () => import('./views/UsersList.vue') },
      { path: 'create', component: () => import('./views/UserCreate.vue') },
      { path: ':id', component: () => import('./views/UserDetails.vue') }
    ]
  }
]

这将创建以下路由：

• /users：显示用户列表
• /users/create：创建新用户
• /users/:id：显示特定用户详情

路由守卫

路由守卫允许我们执行在导航到特定路由之前或之后需要执行的操作。例如，我们可以使用路由守卫来检查用户是否登录，或者限制访问某些页面。

动态路由

动态路由允许我们根据请求的 URL 创建动态路由。例如，我们可以使用 :id 参数来创建一条路由，该路由将显示具有特定 ID 的用户详情：

{ path: '/users/:id', component: () => import('./views/UserDetails.vue') }

懒加载

懒加载是一种优化技术，它允许我们在需要时加载路由组件，而不是在应用程序启动时全部加载。这可以提高应用程序的加载性能。

结语

前端路由是构建动态单页面应用程序的关键。通过使用 Vue 3 中的 vue-router 库，我们能够创建复杂且可维护的路由系统。在下一篇教程中，我们将进一步探索路由守卫和动态路由。