Vue 教程：使用 Vue Router 构建多页面导航与路由守卫

快速概述

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页应用（SPA）中的多页面导航。它通过 URL 与组件映射，实现页面切换而无需刷新浏览器，并支持嵌套路由、路由守卫等高级功能。适用场景包括后台管理系统、多视图应用等。前置环境要求：熟悉命令行，已安装 Node.js（版本 ^20.19.0 || >=22.12.0）。

核心概念与原理

Vue Router 的核心机制是“路由表”：将 URL 路径映射到组件。当用户访问不同路径时，路由器根据映射关系渲染对应组件，并更新视图。路由守卫是导航过程中的钩子函数，可控制访问权限、数据预取等。工作流程：用户点击导航链接 → 路由器解析 URL → 匹配路由记录 → 执行守卫 → 渲染组件。

实战步骤与代码

1. 创建项目：使用 Vite 脚手架创建 Vue 项目，并选择 Vue Router 选项：

   npm create vue@latest

   在提示中选择“Add Vue Router for Single Page Application development?”为 Yes。
2. 配置路由：在 src/router/index.js 中定义路由表：

   import { createRouter, createWebHistory } from 'vue-router'
   import Home from '../views/Home.vue'
   const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import('../views/About.vue') } ]
   const router = createRouter({ history: createWebHistory(), routes })
   export default router

   使用懒加载（动态导入）优化性能。
3. 添加导航：在组件中使用 <router-link> 创建导航链接，用 <router-view> 显示当前路由组件：

   <nav> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> </nav> <router-view />

4. 实现路由守卫：在路由配置中添加全局前置守卫，控制访问权限：

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

常见坑点与优化

• 坑点1：路由重复点击报错。解决：使用 router.push 时捕获重复导航错误。
• 坑点2：守卫中未调用 next() 导致导航卡死。确保所有分支都调用 next()。
• 优化建议：使用路由懒加载（动态导入）减少初始包体积；利用 scrollBehavior 控制页面滚动位置。

通过以上步骤，你可以构建出健壮的多页面导航系统。