在现代前端开发中，单页应用（SPA）已经成为主流趋势。而作为 Vue.js 的核心功能之一，Vue Router 提供了强大的路由管理能力，帮助开发者轻松构建流畅、高效的单页应用。本文将带你深入探讨 Vue3 中的路由配置与导航操作，从安装到实战，手把手教你掌握 Vue Router 的使用技巧。
一、为什么需要 Vue Router？
在单页应用（SPA）中，前端路由负责动态管理视图切换，避免页面刷新带来的性能损耗。Vue3 官方推荐使用 Vue Router 4.x 实现这一能力，它具备以下优势：
二、Vue Router 的安装与初始化
2.1 安装 Vue Router
在开始之前，确保你的项目已经初始化为 Vue3 项目。如果尚未安装 vue-router，可以通过以下命令安装最新版本：
npm install vue-router@next
复制代码
安装完成后，在项目的 src 目录下创建一个 router 文件夹，并在其中新建 index.js 文件用于配置路由。
2.2 配置路由实例
1. 推荐项目结构：
src/├── router/│ └── index.js # 路由主文件└── views/ # 路由组件目录
复制代码
接下来，我们需要在 index.js 文件中创建路由实例并定义路由规则。以下是完整的代码示例：
import { createRouter, createWebHistory } from 'vue-router' // 1. 导入路由组件（推荐懒加载）const Home = () => import('@/views/Home.vue')const About = () => import('@/views/About.vue') // 2. 定义路由规则const routes = [ { path: '/', name: 'Home', component: Home, meta: { title: '首页' } // 路由元信息 }, { path: '/about', name: 'About', component: About, meta: { title: '关于我们' } }] // 3. 创建路由实例const router = createRouter({ history: createWebHistory(process.env.BASE_URL), // 使用History模式 routes, scrollBehavior(to, from, savedPosition) { // 滚动行为控制 return savedPosition || { top: 0 } }}) // 4. 全局路由守卫示例router.beforeEach((to, from) => { document.title = to.meta.title || '默认标题'}) export default router
复制代码
2. 关键配置解析：
routes 数组 ：定义了路由映射关系，每个对象包含 path（路径）、name（路由名称） 和 component（对应的组件）
createWebHistory：使用 HTML5 History 模式（需要服务器支持）
createWebHashHistory：使用 Hash 模式（URL 带 #号，兼容性好）
路由懒加载：通过() => import()提升首屏加载速度
scrollBehavior：控制页面切换时的滚动位置
三、在 Vue 应用中挂载路由
3.1 全局挂载路由
在完成路由配置后，需要将其挂载到 Vue 应用中。打开 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');
复制代码
关键点：
3.2 路由出口组件
在根组件App.vue中：
<template> <div class="app-container"> <nav class="global-nav"> <router-link to="/" active-class="active-link" exact >首页</router-link> <router-link :to="{ name: 'About' }" custom v-slot="{ navigate }" > <button @click="navigate">关于我们</button> </router-link> </nav> <router-view v-slot="{ Component }"> <transition name="fade" mode="out-in"> <component :is="Component" /> </transition> </router-view> </div></template> <style>.active-link { color: #42b983; font-weight: bold;} .fade-enter-active,.fade-leave-active { transition: opacity 0.3s ease;} .fade-enter-from,.fade-leave-to { opacity: 0;}</style>
复制代码
技术亮点：
四、路由导航方式详解
4.1 声明式导航：使用
在 Vue 中，最常用的导航方式是通过 <router-link> 组件。它会生成一个超链接，点击后触发路由跳转。
<template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> </div></template>
复制代码
特性：
4.2 编程式导航全解析
1. 基础导航方法
// 在组合式API中使用import { useRouter } from 'vue-router' const router = useRouter() // 字符串路径router.push('/about') // 带参数的对象形式router.push({ path: '/user/123' }) // 命名路由+参数router.push({ name: 'User', params: { id: 123 }}) // 替换当前路由（无历史记录）router.replace('/login') // 前进/后退router.go(1) // 前进1步router.back() // 等同于 router.go(-1)
复制代码
2. 动态路由实战
定义带参数的路由：
{ path: '/user/:id', name: 'User', component: () => import('@/views/User.vue')}
复制代码
在组件中获取参数：
import { useRoute } from 'vue-router' const route = useRoute()console.log(route.params.id) // 输出URL中的id值
复制代码
3. 嵌套路由
嵌套路由适用于多层结构的页面布局。例如，一个用户中心页面可能包含多个子页面：
const routes = [ { path: '/user', component: UserLayout, children: [ { path: 'profile', component: UserProfile }, { path: 'settings', component: UserSettings } ] }];
复制代码
在父组件中，使用 <router-view>渲染子路由。
4. 导航守卫进阶
常见守卫：
// 全局前置守卫router.beforeEach((to, from) => { if (to.meta.requiresAuth && !isAuthenticated) { return { path: '/login' } }}) // 路由独享守卫{ path: '/admin', component: Admin, beforeEnter: (to, from) => { // 权限校验逻辑 }} // 组件内守卫onBeforeRouteLeave((to, from) => { const answer = window.confirm('确定要离开吗？') if (!answer) return false})
复制代码
五、性能优化技巧
5.1 路由懒加载：
const User = () => import(/* webpackChunkName: "user" */ '@/views/User.vue')
复制代码
5.2 路由组件预加载：
// 在用户hover导航链接时预加载<router-link to="/about" @mouseenter="preloadAbout"></router-link> <script setup>const preloadAbout = () => { import('@/views/About.vue')}</script>
复制代码
5.3 路由分割策略：
dist/├── js/│ ├── main.js│ ├── home.js # 首页路由代码│ └── about.js # About页路由代码
复制代码
六、常见问题排查
问题 1：页面刷新后 404
解决方案：
location / { try_files $uri $uri/ /index.html;}
复制代码
问题 2：路由参数不更新
解决方法：
在组件中监听路由变化：
watch( () => route.params.id, (newId) => { // 重新获取数据 })
复制代码
七、最佳实践总结
路由分层管理：大型项目采用模块化路由
路由元信息：通过meta字段存储权限标识
异常处理：配置全局错误路由
{ path: '/:pathMatch(.*)*', redirect: '/404'}
复制代码
类型安全：配合 TypeScript 使用路由类型提示
import type { RouteRecordRaw } from 'vue-router' const routes: RouteRecordRaw[] = [...]
复制代码
相关推荐：
转载至：https://www.cnblogs.com/proer-blog/p/18749579
行业拓展
分享一个面向研发人群使用的前后端分离的低代码软件——JNPF。
基于 Java Boot/.Net Core 双引擎，它适配国产化，支持主流数据库和操作系统，提供五十几种高频预制组件，内置了常用的后台管理系统使用场景和实用模版，通过简单的拖拉拽操作，开发者能够高效完成软件开发，提高开发效率，减少代码编写工作。
JNPF 基于 SpringBoot+Vue.js，提供了一个适合所有水平用户的低代码学习平台，无论是有经验的开发者还是编程新手，都可以在这里找到适合自己的学习路径。
此外，JNPF 支持全源码交付，完全支持根据公司、项目需求、业务需求进行二次改造开发或内网部署，具备多角色门户、登录认证、组织管理、角色授权、表单设计、流程设计、页面配置、报表设计、门户配置、代码生成工具等开箱即用的在线服务。
评论