Vue3 路由详解：轻松实现单页应用（八）

在现代前端开发中，单页应用（Single Page Application, SPA）因其流畅的用户体验而备受青睐。Vue3 结合 Vue Router 提供了一种强大的解决方案，帮助开发者轻松实现多视图的单页应用。本文将详细介绍 Vue3 路由的基本概念、安装方法、核心 API 以及实际应用示例，帮助你快速掌握这一重要工具。

什么是 Vue Router？

Vue Router 是 Vue.js 的官方路由管理器，它允许你在同一个页面中通过不同的 URL 访问不同的内容，而无需重新加载整个页面。通过 Vue Router，你可以轻松地将 URL 路径与应用中的组件进行映射，从而实现多视图的单页应用。

核心概念

路由实例

路由实例是整个路由系统的控制中心，负责全局导航、添加路由等功能。在 选项式 API 中，你可以通过 this.$router 访问路由实例；而在 组合式 API 中，你可以使用 useRouter() 钩子来获取路由实例。

路由对象

路由对象代表当前激活的路由状态，包含当前 URL、参数、查询等信息。在 选项式 API 中，你可以通过 this.$route 访问路由对象；而在 组合式 API 中，你可以使用 useRoute() 钩子来获取路由对象。

<router-link>

<router-link> 是一个用于在应用中进行导航的组件。它会被渲染成一个 <a> 标签，但可以阻止默认的页面刷新行为，从而实现平滑的单页应用体验。

<router-view>

<router-view> 是一个占位符组件，用于渲染与当前 URL 对应的组件。你可以将其放置在任何位置，以适应你的布局需求。

安装 Vue Router

使用 npm 安装

npm install vue-router

使用国内镜像

推荐使用淘宝镜像进行安装：

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4

使用 CDN

你也可以直接通过 CDN 引入 Vue Router：

<script src="https://unpkg.com/vue-router@4"></script>

基本应用

1. 创建路由表

首先，我们需要创建一个路由表，定义应用中的各个路由及其对应的组件。

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

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

export default createRouter({
  history: createWebHistory(),
  routes
});

2. 在应用中挂载路由

接下来，我们需要在应用的入口文件中引入并挂载路由实例。

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

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

3. 页面出口

在应用的模板中，使用 <router-view> 组件来指定路由匹配到的组件将渲染的位置。

<router-view></router-view>

4. 跳转

使用 <router-link> 组件来创建导航链接，实现页面之间的跳转。

<router-link to="/about">关于</router-link>

5. 动态路由

动态路由允许你在 URL 中传递参数，从而实现更灵活的路由匹配。

{ path: '/user/:id', component: User }

例如，访问 /user/10 时，$route.params.id 的值为 '10'。

6. 懒加载

懒加载可以提高应用的初始加载速度，通过按需加载组件来减少初始加载时间。

const About = () => import('../views/About.vue');

7. 导航守卫

导航守卫允许你在导航过程中执行一些逻辑，例如权限验证。

router.beforeEach((to, from, next) => {
  // 这里可以添加权限验证等逻辑
  next();
});

8. 重定向

重定向可以将用户从一个 URL 重定向到另一个 URL。

{ path: '/old', redirect: '/' }

9. 404 页面

你可以定义一个 404 页面，处理未匹配的路径。

{ path: '/:pathMatch(.*)*', component: NotFound }

简单实例

接下来，我们通过一个简单的实例来演示如何使用 Vue Router 实现单页应用。

HTML 代码

<div id="app">

<h1>Hello App!</h1>

<p>
    <!-- 使用 router-link 组件进行导航 -->
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </p>
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

JavaScript 代码

// 1. 定义路由组件
const Home = { template: '
<div>首页</div>' };
const About = { template: '
<div>关于</div>' };

// 2. 定义路由记录数组

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

// 3. 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
});

// 4. 创建并挂载根实例
const app = createApp({});
app.use(router);
app.mount('#app');

应用实例

以下是一个完整的应用实例，涵盖了路由的定义、创建、挂载、导航和渲染五个核心步骤。

1. main.js (入口文件)

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

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

2. router/index.js (路由配置)

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

// 导入路由组件
const Home = { template: '
<h2>首页</h2>
<p>欢迎来到应用首页！</p>' };
const About = { template: '
<h2>关于我们</h2>
<p>了解更多项目信息。</p>' };

// 定义路由记录数组
const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: { template: '
<div>404 未找到</div>' } }
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

3. App.vue (根组件)

<template>

<div>

<h1>Vue Router 示例</h1>

<nav>
      <router-link to="/" active-class="active-link">首页</router-link> |
      <router-link to="/about" active-class="active-link">关于我们</router-link> |
      <router-link to="/nonexistent">404 示例</router-link>
    </nav>

<hr>

<main>
      <router-view></router-view>
    </main>
  </div>
</template>

<style>
/* 简单的激活样式 */
.active-link {
  font-weight: bold;
  color: #42b983; /* Vue 绿色 */
}

/* 调整链接间距 */
nav a {
  margin: 0 5px;
  text-decoration: none;
}
</style>

当你运行此应用时：

• 点击 首页 链接，URL 变为 /，<router-view> 中显示 首页 组件内容。
• 点击 关于我们 链接，URL 变为 /about，<router-view> 中显示 关于我们 组件内容。
• 点击 404 示例 链接，URL 变为 /nonexistent，<router-view> 中显示 404 未找到 组件内容。

<router-link> 相关属性

<router-link> 组件提供了多个属性，帮助你更好地控制导航行为。

to

to 属性表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，因此这个值可以是一个字符串或描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">首页</router-link>
<!-- 渲染结果 -->
<a href="home">首页</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">首页</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">首页</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">首页</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">用户</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">注册</router-link>

replace

设置 replace 属性后，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下历史记录。

<router-link :to="{ path: '/abc'}" replace>ABC</router-link>

append

设置 append 属性后，则在当前（相对）路径前添加其路径。例如，从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b；如果配置了 append，则为 /a/b。

<router-link :to="{ path: 'relative/path'}" append>相对路径</router-link>

tag

有时你可能希望 <router-link> 渲染成某种标签，例如 <li>。这时可以使用 tag 属性指定要渲染的标签，它仍然会监听点击事件，触发导航。

<router-link to="/foo" tag="li">Foo</router-link>
<!-- 渲染结果 -->
<li>Foo</li>

active-class

设置链接激活时使用的 CSS 类名。默认情况下，Vue Router 会自动为激活的链接添加 router-link-active 和 router-link-exact-active 类名。

<style>
  .active-link {
    background-color: red;
  }
</style>
<p>
  <router-link v-bind:to="{ path: '/route1'}" active-class="active-link">路由链接 1</router-link>
  <router-link v-bind:to="{ path: '/route2'}" tag="span">路由链接 2</router-link>
</p>

exact-active-class

配置当链接被精确匹配时应该激活的类名。默认情况下，Vue Router 会自动为精确匹配的链接添加 router-link-exact-active 类名。

<p>
  <router-link v-bind:to="{ path: '/route1'}" exact-active-class="active-link">路由链接 1</router-link>
  <router-link v-bind:to="{ path: '/route2'}" tag="span">路由链接 2</router-link>
</p>

event

声明可以用来触发导航的事件。可以是一个字符串或一个包含字符串的数组。

<router-link v-bind:to="{ path: '/route1'}" event="mouseover">路由链接 1</router-link>

以上代码设置了 event 为 mouseover，即在鼠标移动到 路由链接 1 上时触发导航。

Vue Router (v4, Vue 3) 核心 API 手册

createRouter 配置项

总结

通过本文的介绍，相信你已经对 Vue3 路由有了全面的了解。Vue Router 提供了丰富的功能和灵活的配置选项，帮助你轻松实现复杂的单页应用。无论是基本的路由配置，还是高级的导航守卫和懒加载，Vue Router 都能为你提供强大的支持。希望本文对你有所帮助，祝你在 Vue3 开发中取得更大的成功！

如果你有任何问题或建议，欢迎在评论区留言交流。