Vue Router 入门指南：从零到构建单页面应用

Vue Router 是 Vue.js 官方提供的路由管理器，它允许你构建单页面应用 (SPA)，实现页面之间的无缝过渡，无需刷新整个浏览器。本指南将带你从零开始，深入了解 Vue Router 的核心概念、用法，并最终构建一个简单的应用示例。

什么是单页面应用 (SPA)?

在传统的 Web 应用中，每次用户点击一个链接，浏览器都需要向服务器发送请求，服务器返回一个新的 HTML 页面，浏览器重新渲染。这种方式会导致明显的页面刷新，用户体验不够流畅。

单页面应用 (SPA) 则不同。SPA 只需加载一次 HTML、CSS 和 JavaScript，之后用户的交互操作都在同一个页面上进行。JavaScript 通过动态更新 DOM 来改变页面内容，模拟页面之间的跳转，而无需重新加载整个页面。这极大地提升了用户体验，让应用感觉更加流畅和快速。

Vue Router 的作用

Vue Router 负责管理 SPA 中不同视图之间的切换和导航。它提供了一套完整的 API，允许你：

• 定义路由: 将 URL 路径与特定的组件关联起来。
• 导航到不同路由: 使用 router-link 组件或编程式导航，实现页面之间的跳转。
• 传递参数: 在路由之间传递数据。
• 使用嵌套路由: 构建复杂的、层次化的应用结构。
• 实现路由守卫: 控制用户对特定路由的访问权限。

开始之前

你需要对 Vue.js 有一定的了解，包括组件、模板、数据绑定等基本概念。如果你还不熟悉 Vue.js，建议先学习 Vue.js 的官方文档。

1. 安装 Vue Router

使用 npm 或 yarn 安装 Vue Router：

“`bash
npm install vue-router@4

或者

yarn add vue-router@4
“`

注意: 这里明确指定安装 vue-router@4，因为 Vue 3 使用的是 Vue Router 4，Vue 2 使用的是 Vue Router 3。本指南基于 Vue 3 和 Vue Router 4。

2. 创建路由实例

在你的项目中创建一个 router.js 或 router/index.js 文件，用于配置 Vue Router。

“`javascript
// router/index.js

import { createRouter, createWebHistory } from ‘vue-router’;
import Home from ‘../components/Home.vue’; // 导入你的组件
import About from ‘../components/About.vue’;

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

const router = createRouter({
history: createWebHistory(), // 使用 HTML5 History API
routes
});

export default router;
“`

代码解释:

• import { createRouter, createWebHistory } from 'vue-router';: 从 vue-router 导入必要的函数。
  • createRouter: 创建 Vue Router 实例。
  • createWebHistory: 创建 history 模式的路由（基于 HTML5 History API，URL 更干净，不需要 #）。 还有 createWebHashHistory (基于 URL hash，兼容性更好) 和 createMemoryHistory (适用于 SSR)。
• import Home from '../components/Home.vue';: 导入你的组件。你需要创建 Home.vue 和 About.vue 组件，这是你的页面内容。
• const routes = [...]: 定义路由配置。这是一个数组，每个元素代表一个路由。
  • path: URL 路径，例如 / 或 /about。
  • name: 路由名称，用于编程式导航。
  • component: 与该路径关联的组件。
• const router = createRouter(...): 创建 Vue Router 实例。
  • history: 配置路由的 history 模式。 createWebHistory() 使用 HTML5 History API，让 URL 看起来更像传统的 URL。
  • routes: 传入之前定义的路由配置。
• export default router;: 导出路由实例，以便在 Vue 应用中使用。

3. 在 Vue 应用中使用路由

在你的 main.js 或 main.ts 文件中，导入并使用路由实例。

“`javascript
// main.js 或 main.ts

import { createApp } from ‘vue’;
import App from ‘./App.vue’;
import router from ‘./router’; // 导入路由实例

const app = createApp(App);

app.use(router); // 使用路由

app.mount(‘#app’);
“`

代码解释:

• import router from './router';: 导入之前导出的路由实例。
• app.use(router);: 将路由实例注册到 Vue 应用中。

4. 使用 router-link 组件进行导航

在你的 Vue 组件中，可以使用 router-link 组件创建链接，实现页面之间的导航。

“`vue
// App.vue

“`

代码解释:

• <router-link to="/">Home</router-link>: 创建一个链接，点击后导航到 / 路径。to 属性指定目标路径。
• <router-view></router-view>: 路由出口。 Vue Router 会将与当前路径匹配的组件渲染到这个位置。

5. 创建组件

你需要创建 Home.vue 和 About.vue 组件，这些组件会根据 URL 路径显示不同的内容。

“`vue
// Home.vue

“`

“`vue
// About.vue

“`

运行你的应用

现在，你可以运行你的 Vue 应用了。你应该能够看到一个包含两个链接的导航栏，点击这些链接可以切换页面，而无需刷新整个浏览器。

路由参数

Vue Router 允许你在路由中定义参数，并将这些参数传递给组件。

“`javascript
// router/index.js

const routes = [
{
path: ‘/user/:id’,
name: ‘User’,
component: User
}
];
“`

代码解释:

• path: '/user/:id': 定义一个包含参数 :id 的路由。 : 表示这是一个动态参数。

在 User.vue 组件中，你可以通过 $route.params.id 访问这个参数。

“`vue
// User.vue

“`

代码解释:

• this.$route.params.id: 访问 URL 中的 id 参数。 $route 是一个包含当前路由信息的对象。

你可以使用 router-link 组件传递参数：

vue
<router-link :to="'/user/123'">User 123</router-link>

或者，你可以使用编程式导航传递参数：

javascript
this.$router.push({ name: 'User', params: { id: 123 } });

嵌套路由

Vue Router 支持嵌套路由，允许你构建复杂的、层次化的应用结构。

“`javascript
// router/index.js

const routes = [
{
path: ‘/user/:id’,
component: User,
children: [
{
path: ‘profile’,
component: UserProfile
},
{
path: ‘posts’,
component: UserPosts
}
]
}
];
“`

代码解释:

• children: [...]: 定义子路由。 /user/:id/profile 和 /user/:id/posts 是 User 组件的子路由。

在 User.vue 组件中，你需要使用 <router-view> 组件来渲染子路由：

“`vue
// User.vue

“`

路由守卫

路由守卫允许你控制用户对特定路由的访问权限。 Vue Router 提供了三种类型的路由守卫：

• 全局守卫: 在所有路由跳转之前或之后执行。
• 路由独享守卫: 只对特定的路由生效。
• 组件内守卫: 在组件内部执行。

全局前置守卫 (beforeEach)

“`javascript
// router/index.js

router.beforeEach((to, from, next) => {
// to: 即将要进入的目标 路由对象
// from: 当前导航正要离开的路由对象
// next: 调用该方法后，才能进入下一个钩子
console.log(‘Going from’, from.path, ‘to’, to.path);
// 例如，检查用户是否已登录
const isAuthenticated = localStorage.getItem(‘token’);
if (to.path !== ‘/login’ && !isAuthenticated) {
next(‘/login’); // 如果未登录，重定向到登录页面
} else {
next(); // 允许继续导航
}
});
“`

代码解释:

• router.beforeEach(...): 注册一个全局前置守卫。
• to: 即将要进入的路由对象。
• from: 当前导航正要离开的路由对象。
• next(): 必须调用 next() 才能继续导航。 你可以传递一个 URL 路径给 next()，实现重定向。

其他路由守卫

• beforeResolve (全局)：和 beforeEach 类似，区别是在所有组件内守卫和异步路由组件被解析之后，才会调用。
• afterEach (全局)： 在导航完成之后被调用，不接收 next 函数。 适用于分析、日志记录等。
• beforeEnter (路由独享)： 直接在路由配置中定义，只对当前路由生效。
• 组件内的导航守卫:
  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

高级用法

• 命名视图: 允许你在一个页面中渲染多个组件。
• 滚动行为: 控制页面跳转后的滚动位置。
• 动态路由匹配: 使用正则表达式匹配路由。
• 路由元信息: 在路由配置中添加自定义数据，例如权限信息。
• 异步路由: 懒加载组件，提升应用的性能。

总结

Vue Router 是一个功能强大且灵活的路由管理器，可以帮助你构建复杂的、可维护的 SPA。 本指南介绍了 Vue Router 的核心概念和用法，从安装配置到路由参数、嵌套路由和路由守卫，为你提供了一个全面的入门指南。通过学习和实践，你将能够熟练地使用 Vue Router，构建出色的 Vue.js 应用。

下一步

• 阅读 Vue Router 的官方文档：https://router.vuejs.org/zh/
• 尝试构建一个更复杂的应用，例如一个博客或一个电商平台。
• 深入了解 Vue Router 的高级用法，例如命名视图、滚动行为和动态路由匹配。