快速上手 Vue Router：Vue 项目路由配置指南 – wiki基地

---

快速上手 Vue Router：Vue 项目路由配置指南

引言：为什么我们需要前端路由？

在前端开发的早期，应用程序通常是多页面的。每次用户点击链接或提交表单，浏览器都会向服务器发送请求，服务器返回一个新的HTML页面，导致页面整体刷新。这种模式简单直观，但也带来了几个问题：

1. 用户体验不佳： 页面切换时会出现白屏，用户感知到的延迟较高。
2. 资源浪费： 即使只是局部内容更新，也需要重新加载整个页面（包括Header, Footer等不变的部分）。
3. 前后端耦合： 页面逻辑和数据获取紧密绑定在服务器端。

随着Ajax技术的普及，前端开始尝试在不刷新页面的情况下更新局部内容，这为单页面应用 (Single Page Application, SPA) 奠定了基础。SPA只有一个HTML页面，所有的页面切换和内容更新都在浏览器端通过JavaScript动态完成。

SPA的优势显而易见：

1. 流畅的用户体验： 页面切换无需刷新，接近原生应用的体验。
2. 性能优化： 只更新必要的部分，减少不必要的资源加载。
3. 前后端分离： 前端负责UI和交互，后端提供API接口，职责更清晰。

然而，SPA也带来了新的挑战：如何管理“页面”之间的导航？在一个SPA中，“页面”实际上是不同的组件或组件组合，它们并没有独立的URL。如果没有路由机制，用户将无法通过浏览器地址栏访问特定“页面”，也无法使用浏览器的前进/后退按钮。

这就是前端路由的核心作用：它负责将URL路径映射到应用程序的不同组件，并在URL变化时动态地渲染对应的组件，同时允许浏览器地址栏的同步和控制。

Vue Router 是Vue.js官方的路由管理器，它是构建单页面Vue应用不可或缺的一部分。它与Vue.js深度集成，使得构建具有强大路由功能的SPA变得异常简单和高效。本文将带你从零开始，详细学习如何安装、配置和使用Vue Router。

准备工作

在开始之前，请确保你已经具备以下基础：

1. 基本的HTML、CSS、JavaScript知识。
2. 对Vue.js核心概念有一定了解，例如组件、实例、模板语法等。
3. 已经安装了Node.js和npm或yarn包管理器。
4. 已经创建了一个Vue项目（可以使用Vue CLI或Vite）。本文的示例主要基于Vue 3和Vue Router 4。

第一步：安装 Vue Router

如果你是使用Vue CLI创建项目，并且在创建时选择了包含Vue Router，那么它可能已经被安装并配置好了。但为了理解其工作原理，我们假设需要手动安装。

在你的Vue项目根目录下打开终端，运行以下命令安装最新版本的Vue Router（兼容Vue 3）：

使用 npm:
bash
npm install vue-router@next

使用 yarn:
bash
yarn add vue-router@next

@next 标记确保你安装的是与Vue 3兼容的Vue Router v4版本。

第二步：基础配置与使用

安装完成后，我们需要在项目中配置并使用Vue Router。通常，我们会在项目的 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件来存放路由配置。

项目的目录结构可能类似这样：

my-vue-project/
├── src/
│ ├── components/ // 存放可复用组件
│ ├── router/ // 存放路由相关配置
│ │ └── index.js // 路由配置文件
│ ├── views/ // 存放页面级组件
│ │ ├── HomeView.vue
│ │ └── AboutView.vue
│ ├── App.vue // 根组件
│ └── main.js // 应用入口文件
└── package.json

现在，我们来编写 src/router/index.js 文件：

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

import { createRouter, createWebHistory, createWebHashHistory } from ‘vue-router’;
import HomeView from ‘../views/HomeView.vue’;
import AboutView from ‘../views/AboutView.vue’; // 假设你有一个About页面组件

// 1. 定义路由规则
const routes = [
{
path: ‘/’, // 路径
name: ‘home’, // 路由名称 (可选，用于编程式导航)
component: HomeView // 对应的组件
},
{
path: ‘/about’,
name: ‘about’,
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// 这里的动态导入是一种常用的性能优化手段：路由懒加载
component: () => import(/ webpackChunkName: “about” / ‘../views/AboutView.vue’)
}
];

// 2. 创建 router 实例
const router = createRouter({
// history 模式：决定路由的工作方式
// createWebHistory 使用 HTML5 History API (需要服务器配置支持)
// createWebHashHistory 使用 URL hash (#) (无需服务器配置)
history: createWebHistory(process.env.BASE_URL), // 或者 createWebHashHistory()
routes // 路由规则数组
});

// 3. 导出 router 实例
export default router;
“`

在上面的代码中：

• 我们导入了 createRouter 函数，它是创建路由实例的核心函数。
• 我们导入了 createWebHistory 和 createWebHashHistory，它们用于指定路由的历史模式。
  • createWebHistory 使用 HTML5 History API，路径看起来更干净（如 /users/1），但需要服务器端进行一些配置，以便在用户直接访问这些URL时能正确返回SPA的index.html文件。
  • createWebHashHistory 使用URL的哈希（#）部分（如 / #/users/1）。哈希的变化不会触发页面刷新，也不需要特殊的服务器配置。这是一种简单易用的模式，特别适合静态网站或不需要服务器配置的场景。
• 我们定义了一个 routes 数组，每个元素都是一个路由对象。一个路由对象至少包含 path (URL路径) 和 component (对应的Vue组件) 两个属性。
• 我们使用了路由懒加载 (component: () => import(...)) 来引入 AboutView.vue 组件。这意味着 AboutView.vue 及其相关的依赖只会在用户访问 /about 路径时才会被加载，这有助于减小应用初始化时的包体积，提升加载速度。/* webpackChunkName: "about" */ 是一个魔法注释，用于指定打包时该模块的chunk名称。
• 最后，我们创建了 router 实例，并通过 export default 导出，以便在应用入口文件 (main.js) 中使用。

接下来，我们需要在应用的入口文件 (main.js) 中将这个路由实例挂载到Vue应用上。

“`javascript
// src/main.js

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

const app = createApp(App);

app.use(router); // 将路由实例挂载到 Vue 应用上

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

通过 app.use(router)，我们将 Vue Router 的功能注册到了 Vue 应用中，使得应用中的任何组件都可以访问到路由功能（例如通过 $route 和 $router ）。

最后，我们需要在应用的根组件 (App.vue) 或主要布局组件中使用 Vue Router 提供的组件来显示路由对应的视图和创建导航链接。

“`vue

“`

在 App.vue 中：

• <router-link> 组件是 Vue Router 提供的用于创建导航链接的组件。它在渲染时会被转换为一个 <a> 标签。to 属性指定了目标路由的路径。当路由匹配成功时，router-link 会自动添加一个 router-link-active 类名，如果路径完全匹配，还会添加 router-link-exact-active 类名，方便我们添加样式（如示例中的绿色字体）。
• <router-view> 组件是 Vue Router 提供的用于显示当前路由匹配到的组件的占位符。根据当前的URL路径，对应的组件将会在 <router-view> 的位置被渲染出来。

至此，你已经完成了 Vue Router 的最基本配置。运行你的Vue项目 (npm run serve 或 yarn serve)，你将看到包含导航链接的页面，并且点击链接时，页面内容会在 <router-view> 区域无刷新切换。浏览器地址栏也会随之改变（根据你选择的历史模式）。

第三步：深入理解核心概念与常用功能

掌握了基础配置后，我们来深入了解 Vue Router 的更多核心概念和常用功能。

3.1 路由对象属性

除了 path 和 component，路由对象还可以有很多其他有用的属性：

• name: 命名路由。为路由指定一个名称。使用命名路由进行导航更灵活，即使路径改变，只要名称不变，导航代码就无需修改。
• redirect: 重定向。当用户访问某个路径时，将其重定向到另一个路径或命名路由。
  javascript
{ path: '/home', redirect: '/' } // 访问 /home 会重定向到 /
{ path: '/old-about', redirect: { name: 'about' } } // 访问 /old-about 会重定向到 /about (使用命名路由)
{ path: '/other', redirect: to => {
// 重定向函数，to 是当前路由对象
return { path: '/new-path', query: to.query }
}
}
• alias: 别名。为一个路径指定多个别名。访问别名路径会匹配到该路由，但URL不会改变。
  javascript
{ path: '/users/:id', component: UserView, alias: '/people/:id' } // 访问 /people/123 也会匹配到 UserView，但URL仍显示 /people/123
• meta: 元信息。一个任意的对象，可以在路由对象中存储自定义数据，例如页面标题、是否需要登录权限等。
  javascript
{
path: '/admin',
component: AdminView,
meta: { requiresAuth: true, title: 'Admin Dashboard' }
}
  这些元信息可以在导航守卫中访问到 (to.meta)。
• children: 嵌套路由。用于定义父子路由关系。

3.2 动态路由匹配

很多时候，我们需要根据URL的一部分来展示不同的内容，例如根据用户ID显示不同的用户信息。这可以通过动态路由来实现。

在路由路径中使用冒号 : 跟着一个参数名称，即可定义一个动态片段。

javascript
// src/router/index.js
const routes = [
// ... 其他路由
{
path: '/users/:id', // :id 就是动态参数
name: 'user',
component: () => import('../views/UserView.vue')
}
];

现在，/users/1、/users/100 等路径都会匹配到这个路由。在 UserView.vue 组件中，可以通过 this.$route.params.id (选项式API) 或 route.params.id (组合式API，使用 useRoute() hook) 来访问这个动态参数。

在组件中获取路由参数 (组合式API):

“`vue

“`

在组件中获取路由参数 (选项式API):

“`vue

“`

3.3 嵌套路由

真实的应用程序界面通常是多层嵌套的。例如，一个用户设置页面可能有“个人资料”、“账号安全”、“通知设置”等子页面，这些子页面共享父页面的侧边栏或头部。Vue Router 允许通过 children 属性来定义路由的嵌套关系。

“`javascript
// src/router/index.js
import UserSettingsLayout from ‘../views/UserSettingsLayout.vue’; // 父级布局组件
import UserProfile from ‘../views/UserProfile.vue’; // 子组件1
import UserSecurity from ‘../views/UserSecurity.vue’; // 子组件2

const routes = [
// … 其他路由
{
path: ‘/settings’,
name: ‘settings’,
component: UserSettingsLayout, // 父级路由匹配到的组件
children: [ // 子路由定义在 children 数组中
{
path: ”, // 空字符串路径表示默认子路由，匹配 /settings
name: ‘settings-profile’,
component: UserProfile
},
{
path: ‘security’, // 子路径，匹配 /settings/security
name: ‘settings-security’,
component: UserSecurity
}
// 更多子路由…
]
}
];
“`

在父组件 UserSettingsLayout.vue 中，需要放置另一个 <router-view> 来渲染匹配到的子路由组件：

“`vue

“`

访问 /settings 会显示 UserSettingsLayout 组件，并在其 <router-view> 位置渲染 UserProfile 组件（因为它是默认子路由）。访问 /settings/security 会显示 UserSettingsLayout 组件，并在其 <router-view> 位置渲染 UserSecurity 组件。

3.4 编程式导航

除了使用 <router-link> 进行声明式导航，我们还可以在 JavaScript 代码中通过访问路由实例 ($router 或 useRouter()) 进行编程式导航。这在你需要在用户完成某个操作（如表单提交、按钮点击）后进行页面跳转时非常有用。

常用的编程式导航方法：

• router.push(location): 导航到一个新的 URL。这个方法会在浏览器历史栈中添加一个新条目，因此用户可以点击“后退”按钮回到上一个页面。location 可以是一个字符串路径，也可以是一个路由对象。
• router.replace(location): 导航到一个新的 URL，但不会在历史栈中添加新条目，而是替换掉当前的历史记录。因此用户点击“后退”按钮会跳过当前页面。location 同样可以是字符串路径或路由对象。
• router.go(n): 在浏览器历史记录中前进或后退 n 步。n 是一个整数。router.go(-1) 等同于点击后退按钮，router.go(1) 等同于点击前进按钮。

使用示例 (组合式API):

“`vue

“`

使用示例 (选项式API):

“`vue

“`

推荐使用命名路由 ({ name: '...', params: {...}, query: {...} }) 进行导航，特别是当路由包含动态参数或查询参数时，这样代码更清晰，且不易受路径字符串变化的影响。

3.5 路由参数作为组件 Props

在动态路由中，通过 $route.params 或 route.params 获取参数是常见的做法。但这样会导致组件与路由耦合，不够灵活。更好的方式是将路由参数直接作为组件的 props 传递。

在路由配置中设置 props: true，动态参数 :id 将会作为名为 id 的 prop 传递给组件。

javascript
// src/router/index.js
const routes = [
// ... 其他路由
{
path: '/users/:id',
name: 'user',
component: () => import('../views/UserView.vue'),
props: true // 将路由参数作为 props 传递
}
];

然后在 UserView.vue 组件中声明这个 prop：

“`vue

“`

props 属性还可以接受一个对象或函数，进行更灵活的参数传递：

• props: { userId: 123 }: 传递一个静态值作为 prop。
• props: route => ({ query: route.query.q }): 使用一个函数，接收当前路由对象作为参数，并返回一个对象，该对象的属性将作为 props 传递。这允许你将查询参数、哈希等也作为 props 传递。

3.6 导航守卫 (Navigation Guards)

导航守卫是 Vue Router 提供的重要功能，用于在路由导航过程中执行逻辑，例如检查用户是否登录、权限验证、页面标题修改、数据加载等。

导航守卫有多种类型，它们在不同的阶段被触发：

1. 全局守卫： beforeEach, beforeResolve, afterEach
2. 路由独享守卫： beforeEnter
3. 组件内守卫： beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

最常用的导航守卫是全局前置守卫 router.beforeEach，它在每次导航发生 之前 被调用。

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

// … 创建 router 实例

router.beforeEach((to, from, next) => {
// to: 即将进入的目标路由对象
// from: 当前导航正要离开的路由对象
// next: 调用该方法来 resolve 这个钩子。必须调用，否则导航会停止！
// next()：进入管道中的下一个钩子。
// next(false)：中断当前导航。
// next(‘/’) 或 next({ path: ‘/’ })：跳转到一个不同的地址。当前的导航被中断，进行新的导航。
// next(Error)：导航会被终止，并且错误会被传递给 router.onError() 注册过的回调。

console.log(‘导航前置守卫:’, from.path, ‘->’, to.path);

// 示例：简单的登录验证
const requiresAuth = to.meta.requiresAuth; // 获取目标路由的 meta 信息

if (requiresAuth && !userIsLoggedIn()) { // 假设有一个函数判断用户是否登录
console.log(‘需要登录才能访问’, to.path);
// 用户未登录，重定向到登录页
next(‘/login’); // 或者 next({ name: ‘login’ })
} else {
// 无需登录 或 已登录，继续导航
next(); // 必须调用 next()
}

// 注意：next() 的调用必须在所有条件判断的最后，且确保每条逻辑分支都调用了 next()
});

// 假设 userIsLoggedIn() 是一个判断用户登录状态的函数
function userIsLoggedIn() {
// 实际应用中可能是检查本地存储中的 token 或全局状态管理中的用户信息
return localStorage.getItem(‘userToken’) != null; // 简单示例
}

// … 导出 router 实例
“`

在上面的 beforeEach 守卫中，我们检查目标路由 (to) 的 meta 属性是否设置了 requiresAuth: true。如果需要登录且用户未登录，我们就调用 next('/login') 将用户重定向到登录页。否则，调用 next() 允许导航继续。

路由独享守卫 beforeEnter 可以在单个路由配置中定义：

javascript
{
path: '/admin',
component: AdminView,
beforeEnter: (to, from, next) => {
// 可以在这里执行该路由特有的逻辑，例如检查管理员权限
console.log('进入 Admin 路由前的守卫');
if (checkAdminPermissions()) {
next(); // 有权限，继续
} else {
next(false); // 无权限，中断导航
// 或者重定向到无权限页面 next('/no-permission')
}
}
}

组件内守卫在组件内部定义，可以访问组件实例 this (但在 beforeRouteEnter 中需要通过 next(vm => { ... }) 回调访问)。

• beforeRouteEnter(to, from, next): 在路由进入组件 之前 调用。此时组件实例还未被创建，不能访问 this。
• beforeRouteUpdate(to, from, next): 在当前路由改变，但该组件被复用时调用 (例如 /users/1 到 /users/2)。可以访问 this。
• beforeRouteLeave(to, from, next): 在导航离开当前组件 之前 调用。可以访问 this。常用于提示用户保存未保存的修改。

组件内守卫示例 (选项式API):

“`vue

“`

导航守卫是实现权限控制、页面跳转拦截、数据预加载等高级路由功能的关键。

第四步：常见场景与进阶配置

4.1 404 页面处理

当用户访问一个不存在的路径时，我们通常需要显示一个“404 Not Found”页面。在 Vue Router 中，可以通过定义一个通配符路径来实现。通配符路径 /:pathMatch(.*)* 会匹配所有未匹配到的路径。

“`javascript
// src/router/index.js
import NotFoundView from ‘../views/NotFoundView.vue’; // 404 页面组件

const routes = [
// … 其他路由 (确保它们在通配符路由之前定义)

// 404 页面，匹配所有未匹配到的路径
// 注意：这个路由应该放在 routes 数组的最后
{
path: ‘/:pathMatch(.)‘, // Vue Router 4 的通配符语法
name: ‘NotFound’,
component: NotFoundView
}
];
“`

/:pathMatch(.*)* 的含义：
* : 定义一个参数。
* pathMatch 参数名称。
* (.*) 匹配任意字符（包括 /）。
* * 匹配0次或多次前面的模式。
* 外层括号 () 是为了创建一个捕获组。
* 最后的 * 是为了让 /a/b 这样的路径也能被捕获。

在 Vue Router 3 中，通配符路径是 * 或 /*。Vue Router 4 改变了语法，需要使用 /:pathMatch(.*)*。

4.2 路由的 History 模式与服务器配置

前面提到了 createWebHistory 会创建没有哈希 (#) 的漂亮 URL。这种模式依赖于 HTML5 History API。当用户直接在浏览器中输入 /about 并回车访问，或者在/about 页面刷新时，浏览器会向服务器发送 /about 的请求。如果你的服务器没有配置，它可能会返回一个 404 错误，因为服务器上并没有一个物理文件叫 /about。

为了解决这个问题，服务器需要进行配置，使其在接收到任何不匹配静态资源的请求时，都返回应用的入口文件 index.html。然后，Vue Router 会在 index.html 加载后接管控制权，解析当前的 URL (/about)，并渲染对应的组件。

以下是一些常见服务器的配置示例：

• Apache: 在 .htaccess 文件中添加 RewriteRule。
  apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
• Nginx: 在你的 server 配置中添加 try_files。
  nginx
server {
# ... 其他配置
location / {
try_files $uri $uri/ /index.html;
}
}

• Express (Node.js): 使用 connect-history-api-fallback 中间件。
  “`javascript
  const express = require(‘express’);
  const history = require(‘connect-history-api-fallback’);
  const serveStatic = require(‘serve-static’);

  const app = express();

  // 使用 history 模式中间件
  app.use(history());

  // 提供静态文件服务
  app.use(serveStatic(__dirname + ‘/dist’)); // 假设你的构建输出在 dist 目录

  app.listen(8080);
  “`
  * Netlify/Vercel 等静态网站托管平台: 这些平台通常内置了对 SPA History 模式的支持，无需额外配置。只需确保你的构建输出目录正确即可。

如果你不方便配置服务器，或者应用是一个静态网站，使用 createWebHashHistory (哈希模式) 是一个无需服务器配置的简单选择。

4.3 命名视图 (Named Views)

有时，一个路由可能需要同时渲染多个组件到不同的 <router-view> 位置，而不是只在一个 <router-view> 位置渲染一个组件。这可以通过命名视图来实现。

首先，在你的模板中给 <router-view> 命名：

“`vue

“`

然后，在路由配置中使用 components 属性（注意是复数）来指定每个命名视图对应的组件：

“`javascript
// src/router/index.js
import HomeView from ‘../views/HomeView.vue’;
import Header from ‘../components/Header.vue’; // 头部组件
import Sidebar from ‘../components/Sidebar.vue’; // 侧边栏组件
import Footer from ‘../components/Footer.vue’; // 底部组件

const routes = [
{
path: ‘/’,
// components 用于命名视图
components: {
default: HomeView, // 默认视图 (无 name 的 router-view)
header: Header, // name 为 header 的 router-view
sidebar: Sidebar, // name 为 sidebar 的 router-view
footer: Footer // name 为 footer 的 router-view
}
},
// … 其他路由
];
“`

这样，当你访问 / 路径时，HomeView 会渲染到默认的 <router-view>，Header 会渲染到 name="header" 的 <router-view>，以此类推。

命名视图在创建复杂的布局时非常有用。

4.4 滚动行为 (Scroll Behavior)

当进行路由切换时，页面通常会保持在当前滚动位置。但很多时候，我们期望新页面加载后能滚动到顶部，或者如果使用了浏览器前进/后退按钮，能恢复到上次访问时的滚动位置。

Vue Router 允许通过 scrollBehavior 函数来自定义滚动行为。在创建路由实例时配置这个函数：

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

// … 导入 createRouter, history 模式等

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
// 定义滚动行为
scrollBehavior (to, from, savedPosition) {
// to: 即将进入的目标路由对象
// from: 正要离开的路由对象
// savedPosition: 如果是浏览器前进/后退触发的导航，这个是上次滚动到的位置；否则为 null

console.log('滚动行为触发:', from.path, '->', to.path);
console.log('保存的位置:', savedPosition);

if (savedPosition) {
  // 如果有保存的位置 (前进/后退)，则滚动到该位置
  return savedPosition;
} else {
  // 否则，滚动到页面顶部
  return { top: 0, left: 0 };
  // 也可以使用 el 选择器滚动到特定元素
  // return { el: '#main-content', behavior: 'smooth' } // 平滑滚动到 ID 为 main-content 的元素
}

}
});

// … 导出 router
“`

scrollBehavior 函数返回一个滚动位置对象，支持 { top: number, left: number } 坐标，或者 { el: string, behavior: 'smooth' | 'auto' } 滚动到指定元素。返回 false 或一个空对象表示不改变滚动位置。

这个功能在改善用户体验方面非常重要。

第五步：最佳实践与注意事项

1. 使用命名路由： 尽量为你的路由命名，尤其是有动态参数的路由。这使得编程式导航 (router.push({ name: 'user', params: { id: 123 } })) 更健壮，不易受路径字符串变化的影响。
2. 使用路由参数作为 Props： 将路由参数通过 props: true 或 props: () => ({...}) 传递给组件，可以降低组件与 $route 对象的耦合，提高组件的可复用性。

3. 组织路由文件： 对于大型应用，router/index.js 文件可能会变得非常庞大。考虑将路由配置拆分成多个模块，按功能或模块进行组织，然后在 index.js 中导入合并。
   “`javascript
   // src/router/modules/user.js
   const userRoutes = [
   { path: ‘/users/:id’, name: ‘user’, component: UserView, props: true },
   // … 更多用户相关路由
   ];
   export default userRoutes;

   // src/router/index.js
   import { createRouter, createWebHistory } from ‘vue-router’;
   import homeRoutes from ‘./modules/home’; // 假设你有其他模块的路由
   import userRoutes from ‘./modules/user’;

   const routes = [
   …homeRoutes,
   …userRoutes,
   // … 其他顶层路由
   { path: ‘/:pathMatch(.)‘, name: ‘NotFound’, component: NotFoundView }
   ];

   const router = createRouter({…});
   export default router;
   ``
4. **路由懒加载：** 对于大多数页面级组件，使用动态导入 (() => import(…)) 进行路由懒加载可以显著优化应用首次加载的速度。
5. **History 模式的服务器配置：** 如果你使用了createWebHistory，切记要配置服务器，否则用户直接访问或刷新页面可能会遇到 404 错误。
6. **导航守卫中的next()：** 在导航守卫中，确保你调用了next()，并且只调用一次。无论是next()、next(false)、next(…)，都必须调用，否则导航会停滞。
7. **监听路由参数变化：** 如果你的组件需要在路由参数变化（但组件实例被复用）时执行逻辑（如重新获取数据），记住使用watch监听$route或beforeRouteUpdate` 守卫。

总结

Vue Router 是构建现代Vue单页面应用不可或缺的强大工具。本文详细介绍了从安装、基本配置到常用功能的方方面面，包括：

• 理解前端路由的必要性。
• 安装和初始化 Vue Router。
• 定义路由规则和配置路由实例。
• 使用 <router-view> 渲染组件和 <router-link> 创建导航。
• 掌握路由对象的各种属性：name, redirect, alias, meta, children。
• 实现动态路由匹配和在组件中获取参数。
• 配置嵌套路由以构建复杂的页面布局。
• 使用编程式导航 (router.push, router.replace, router.go)。
• 将路由参数作为组件 props 传递。
• 利用导航守卫进行权限控制、数据加载等。
• 处理 404 页面和理解 History 模式的服务器配置。
• 使用命名视图创建多组件布局。
• 配置滚动行为优化用户体验。

通过本文的学习，你应该已经能够快速上手 Vue Router，并在你的 Vue 项目中构建出具有良好导航体验的单页面应用。Vue Router 还有更多高级功能，例如路由过渡动画、数据获取策略、KeepAlive 与路由联动等，这些都值得你在实际开发中进一步探索和应用。

现在就开始动手实践吧，祝你在 Vue Router 的世界里开发顺利！

---