---

Vue Router 入门指南

Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 深度集成，可以轻松构建单页面应用（SPA）。本指南将带你从零开始，逐步掌握 Vue Router 的基本用法。

1. 什么是路由？为什么需要 Vue Router？

在传统的网页应用中，每次用户点击链接，浏览器都会向服务器发送请求，然后服务器返回一个新的 HTML 页面。这会导致页面闪烁和资源重复加载。

单页面应用（SPA）的目标是只加载一次 HTML、CSS 和 JavaScript 资源。当用户导航到不同的页面时，应用程序会动态地更新内容，而不是重新加载整个页面。为了实现这一点，我们需要一个前端路由系统来管理 URL 与组件之间的映射关系，这就是 Vue Router 的作用。

Vue Router 能够帮助我们：
* 管理 URL 状态：URL 的变化不再导致页面刷新，而是触发组件的切换。
* 组件化视图：将不同的页面或视图抽象为 Vue 组件，通过路由进行按需加载和展示。
* 实现导航守卫：控制用户访问特定路由的权限（如登录验证）。
* 方便参数传递：在不同组件之间传递数据。

2. 安装 Vue Router

首先，确保你已经有一个 Vue.js 项目。如果你还没有，可以使用 Vue CLI 快速创建一个：

bash
vue create my-vue-app
cd my-vue-app

接下来，安装 Vue Router。有两种主要方式：

a) 使用 npm 或 yarn (推荐)

“`bash
npm install vue-router@4 # 适用于 Vue 3

或者

yarn add vue-router@4 # 适用于 Vue 3

如果你的项目是 Vue 2，则安装 Vue Router 3

npm install vue-router@3

或者

yarn add vue-router@3

“`

b) CDN 引入

你也可以通过 <script> 标签直接引入 Vue Router，但这通常只推荐用于简单的原型或学习项目。

“`html

“`

3. 创建 Router 实例

安装完成后，我们需要在 Vue 项目中创建一个路由实例并配置路由规则。

在 src 目录下创建一个 router 文件夹，并在其中创建 index.js 文件：

src/
├── main.js
├── App.vue
└── router/
└── index.js <-- 新建文件

src/router/index.js 的内容如下：

“`javascript
// src/router/index.js

import { createRouter, createWebHistory } from ‘vue-router’; // 导入 Vue Router 4 的核心方法
import Home from ‘../views/Home.vue’; // 导入 Home 组件
import About from ‘../views/About.vue’; // 导入 About 组件

// 1. 定义路由组件
// 可以从其他文件导入
// const Home = { template: ‘

‘ };
// const About = { template: ‘

‘ };

// 2. 定义路由规则
// 每个路由规则都是一个对象，包含 path 和 component
const routes = [
{
path: ‘/’,
name: ‘Home’,
component: Home
},
{
path: ‘/about’,
name: ‘About’,
component: About
// 也可以使用路由懒加载，这在大型应用中很常见
// component: () => import(‘../views/About.vue’)
}
];

// 3. 创建路由实例
const router = createRouter({
// history 模式，使用 HTML5 History API，URL 不带 #
// createWebHashHistory() 使用 Hash 模式，URL 会带 #
history: createWebHistory(),
routes // 路由规则
});

// 4. 导出路由实例
export default router;
“`

为了让上述代码正常工作，你还需要创建 views 文件夹和对应的 Home.vue 及 About.vue 组件：

src/views/Home.vue

“`vue

“`

src/views/About.vue

“`vue

“`

4. 将 Router 挂载到 Vue 应用

创建了路由实例后，我们需要在 Vue 应用的入口文件 (src/main.js) 中将其挂载：

“`javascript
// src/main.js

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

const app = createApp(App);

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

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

5. 使用 <router-view> 和 <router-link>

现在，你的 Vue 应用已经集成了 Vue Router。接下来，我们需要在模板中使用 Vue Router 提供的组件来渲染路由匹配到的组件，并创建导航链接。

修改 src/App.vue：

“`vue

“`

现在运行你的应用 (npm run serve 或 yarn serve)，你就可以通过点击 Home 和 About 链接，看到页面内容在不刷新整个页面的情况下进行切换了！

6. 动态路由匹配

很多时候，我们需要路由能够匹配某种模式，并将匹配到的部分作为参数传递给组件。例如，一个用户详情页 /users/123，其中 123 是用户 ID。

a) 定义动态路由

在路由规则中使用冒号 : 来表示一个动态片段：

src/router/index.js

“`javascript
// … 其他导入

const routes = [
// … 其他路由
{
path: ‘/user/:id’, // 冒号表示动态参数
name: ‘User’,
component: () => import(‘../views/User.vue’)
}
];

// … 创建并导出路由实例
“`

src/views/User.vue

“`vue

“`

在 App.vue 中添加一个链接：

“`vue

“`

b) 获取路由参数

在组件内部，可以通过 this.$route.params 对象访问动态参数。

c) 编程式导航

除了使用 <router-link> 进行声明式导航，我们还可以通过 this.$router 实例进行编程式导航。

常用的方法有：
* this.$router.push(path)：导航到一个新的 URL，并将当前 URL 压入历史栈。
* this.$router.replace(path)：导航到一个新的 URL，替换掉当前 URL，不留下历史记录。
* this.$router.go(n)：在历史记录中前进或后退 n 步。

示例 (User.vue 中已展示 this.$router.push('/'))。

7. 路由重定向与别名

a) 重定向 (Redirect)

你可以将一个路径重定向到另一个路径：

src/router/index.js

javascript
const routes = [
// ...
{
path: '/home',
redirect: '/' // 访问 /home 会自动重定向到 /
},
{
path: '/users/:id',
redirect: to => {
// 也可以是一个函数，实现更复杂的重定向逻辑
// to 是目标路由对象
return { path: `/user/${to.params.id}` };
}
}
];

b) 别名 (Alias)

别名允许你为同一个路由提供多个路径，但 URL 不会改变：

src/router/index.js

javascript
const routes = [
// ...
{
path: '/',
component: Home,
alias: '/index' // 访问 /index 也会渲染 Home 组件，但 URL 仍显示 /index
}
];

8. 嵌套路由 (Nested Routes)

现实应用中，很多页面是由层级结构的组件组成的。Vue Router 允许你定义嵌套路由，将子路由渲染到父组件的 <router-view> 中。

a) 定义嵌套路由

src/router/index.js

javascript
const routes = [
// ...
{
path: '/settings',
component: () => import('../views/Settings.vue'),
children: [ // 子路由
{
path: '', // 默认子路由，匹配 /settings
component: () => import('../views/SettingsProfile.vue')
},
{
path: 'security', // 匹配 /settings/security
component: () => import('../views/SettingsSecurity.vue')
}
]
}
];

b) 渲染子路由

在父组件 (Settings.vue) 中，你需要再次使用 <router-view> 来渲染子路由匹配到的组件：

src/views/Settings.vue

“`vue

“`

创建 SettingsProfile.vue 和 SettingsSecurity.vue 组件：

src/views/SettingsProfile.vue

“`vue

“`

src/views/SettingsSecurity.vue

“`vue

“`

在 App.vue 中添加 Settings 链接：

“`vue

“`

9. 命名路由

给路由命名可以让你在导航时更灵活，即使路径改变了，也可以通过名称引用路由。

a) 定义命名路由

在路由规则中添加 name 属性：

src/router/index.js

javascript
const routes = [
{
path: '/',
name: 'Home', // 命名路由
component: Home
},
{
path: '/user/:id',
name: 'User', // 命名路由
component: () => import('../views/User.vue')
}
];

b) 使用命名路由导航

无论是 <router-link> 还是编程式导航，都可以使用命名路由：

“`vue

Go to User 123
“`

javascript
// 编程式导航
this.$router.push({ name: 'User', params: { id: 456 } });

10. 导航守卫 (Navigation Guards)

导航守卫是 Vue Router 提供的钩子函数，用于在路由跳转过程中进行权限验证或数据获取等操作。

常用的导航守卫包括：

• 全局前置守卫：router.beforeEach()
• 全局后置钩子：router.afterEach()
• 路由独享的守卫：beforeEnter
• 组件内的守卫：beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

a) 全局前置守卫示例

在 src/router/index.js 中：

“`javascript
// … 创建路由实例之后

router.beforeEach((to, from, next) => {
console.log(‘全局前置守卫:’, to.path, from.path);

// 假设需要登录才能访问 /settings
const isAuthenticated = false; // 模拟用户未登录

if (to.path === ‘/settings’ && !isAuthenticated) {
alert(‘请先登录！’);
next(‘/’); // 重定向到首页
} else {
next(); // 必须调用 next()，否则导航会停止
}
});

// 全局后置钩子（没有 next 参数，不影响导航）
router.afterEach((to, from) => {
console.log(‘全局后置钩子:’, to.path, from.path);
// 例如，可以在这里发送页面访问统计数据
});
“`

总结

Vue Router 是构建 Vue.js 单页面应用的强大工具。通过本指南，你应该已经掌握了它的核心概念和基本用法，包括：

• 安装与配置 Vue Router
• 定义和使用路由规则
• router-link 和 router-view 的用法
• 动态路由匹配和参数获取
• 编程式导航
• 路由重定向与别名
• 嵌套路由
• 命名路由
• 导航守卫

掌握这些知识，你就能开始构建功能完善、用户体验流畅的单页面应用了。要深入了解更多高级功能（如路由元信息、过渡效果、数据获取策略等），请查阅 Vue Router 官方文档。

---