读懂 Vue3 路由：从入门到实战

在构建现代化单页应用（SPA）时，Vue3 凭借其简洁高效的特性成为众多开发者的首选。

而 Vue3 路由（Vue Router）则是 Vue3 生态中不可或缺的一部分，它就像是单页应用的 “导航地图”，帮助用户在不同的页面（组件）之间自由穿梭，同时保证页面的流畅切换，无需刷新整个网页。

一、Vue3 路由的基础概念

1. 什么是路由

路由可以简单理解为 “网址” 与 “页面内容（组件）” 之间的对应关系。

在传统的多页应用中，每一个页面都是一个独立的 HTML 文件，通过超链接跳转时，浏览器会重新加载新的页面。而在单页应用里，整个应用只有一个 HTML 文件，通过路由来控制不同组件的显示与隐藏，从而模拟出页面跳转的效果。

例如，当用户访问 https://example.com/home 时，显示首页组件；访问 https://example.com/about 时，显示关于我们的组件，这就是路由在起作用。

2. Vue Router 的作用

Vue Router 是 Vue.js 官方的路由管理器，专门为 Vue 应用开发设计。它不仅实现了 URL 与组件的映射，还提供了诸如路由嵌套、路由守卫、动态路由等强大功能，让开发者能够轻松构建复杂的单页应用架构，提升用户体验。

二、Vue3 路由的安装与基本使用

1. 安装 Vue Router

在使用 Vue3 路由之前，需要先安装它。如果你的项目是通过 npm 管理依赖，可以在项目根目录下执行以下命令：

npm install vue-router@4

如果你使用的是 yarn，则执行：

yarn add vue-router@4

这里安装的是 Vue Router 4 版本，它完美适配 Vue3。

2. 创建路由实例

安装完成后，在项目中创建一个路由文件，例如 router.js。在该文件中，引入必要的模块并创建路由实例，代码如下：

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

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

export default router;

在这段代码中：

• 首先从 vue-router 中引入 createRouter 和 createWebHistory 方法。createRouter 用于创建路由实例，createWebHistory 用于创建基于 HTML5 History API 的路由模式，这种模式下的 URL 更加简洁美观，例如 https://example.com/about，没有多余的哈希符号。
• 接着引入了两个组件 Home 和 About，它们将作为不同路由对应的显示内容。
• 然后定义 routes 数组，其中每个对象表示一条路由规则，包含 path（路由路径）、name（路由名称，方便在代码中引用）和 component（对应的组件）。
• 最后通过 createRouter 方法创建路由实例，并将配置好的 history 和 routes 传入，再将路由实例导出，以便在 Vue 应用中使用。

3. 在 Vue 应用中使用路由

在 main.js 文件中，引入创建好的路由实例，并将其挂载到 Vue 应用上：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

这样，路由就已经集成到 Vue 应用中了。在 App.vue 文件中，可以使用 <router-view> 组件来显示当前路由对应的组件内容，例如：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

同时，还可以使用 <router-link> 组件来创建导航链接，代替传统的 <a> 标签，例如：

<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

此时，点击这些链接，页面会在不刷新的情况下显示对应的组件内容。

三、Vue3 路由的进阶功能

1. 动态路由

在实际应用中，经常会遇到需要传递参数的路由，例如显示用户详情页，每个用户都有一个唯一的 ID。这时就可以使用动态路由，在路由路径中使用参数，示例如下：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
];

在上述代码中，:id 就是一个动态参数。当用户访问 https://example.com/user/1 时，1 这个值会被传递到 User 组件中。在 User 组件中，可以通过 this.$route.params.id（在选项式 API 中）或 useRoute().params.id（在组合式 API 中）来获取这个参数值。

2. 路由嵌套

有些页面的结构比较复杂，包含多个子页面，这时候就需要用到路由嵌套。例如，在一个博客应用中，文章详情页可能还包含评论区、相关文章推荐等子模块，每个子模块可以对应一个子路由。路由嵌套的配置方式如下：

const routes = [
  {
    path: '/article',
    name: 'Article',
    component: Article,
    children: [
      {
        path: ':id',
        name: 'ArticleDetail',
        component: ArticleDetail
      },
      {
        path: ':id/comments',
        name: 'ArticleComments',
        component: ArticleComments
      }
    ]
  }
];

在上述代码中，children 数组定义了 Article 组件的子路由。访问 https://example.com/article/1 会显示 ArticleDetail 组件，访问 https://example.com/article/1/comments 会显示 ArticleComments 组件。

在 Article.vue 组件中，同样需要使用 <router-view> 来显示子路由对应的内容。

3. 路由守卫

路由守卫用于在路由跳转的不同阶段执行一些自定义逻辑，例如验证用户登录状态、记录页面访问日志等。常见的路由守卫有全局守卫、路由独享守卫和组件内守卫。

• 全局守卫：在 router.js 文件中可以定义全局前置守卫 router.beforeEach 和全局后置钩子 router.afterEach。例如，使用全局前置守卫来验证用户是否登录：

router.beforeEach((to, from, next) => {
  const isLoggedIn = localStorage.getItem('isLoggedIn');
  if (to.meta.requiresAuth &&!isLoggedIn) {
    next('/login');
  } else {
    next();
  }
});

上述代码中，to 表示即将要进入的目标路由对象，from 表示当前导航正要离开的路由，next 是一个函数，调用 next() 表示放行，继续跳转；调用 next('/login') 表示将导航重定向到 /login 路由。

• 路由独享守卫：在路由配置中，可以为每条路由单独设置守卫，例如：

const routes = [
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      // 执行自定义逻辑
      next();
    }
  }
];

• 组件内守卫：在组件内部定义 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 方法，用于在组件的路由相关操作时执行逻辑。