HoRain云--Vue3路由完全指南

HoRain 云小助手个人主页⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。目录⛳️ 推荐Vue3 路由Vue Router全面解析一、Vue Router 核心认知1. 什么是 Vue Router2. 为什么需要 Vue Router二、安装与初始化1. 安装2. 基础配置src/router/index.js3. 在 main.js 中使用4. 在 App.vue 中使用三、路由模式四、动态路由1. 配置动态路由2. 传参方式五、嵌套路由1. 配置嵌套路由2. 在父路由组件中使用 RouterView六、参数传递1. params 与 query 的区别2. 获取参数七、路由守卫1. 全局前置守卫2. 路由守卫类型八、编程式导航1. 使用 router.push()2. 使用 router.replace()3. 使用 router.go(n)九、实战案例1. 实现登录权限控制2. 实现页面标题自动更新十、总结Vue3 路由Vue Router全面解析Vue Router 是 Vue.js 官方推出的路由管理库是构建单页面应用SPA的核心工具。Vue3 必须使用 Vue Router 4.x 版本它与 Vue3 的 Composition API 深度集成提供了更简洁高效的使用体验。一、Vue Router 核心认知1. 什么是 Vue Router本质是 URL 路径与 Vue 组件的映射关系用于实现单页面应用SPA的页面切换避免页面刷新核心价值无刷新页面切换、统一管理页面路径、支持路由传参、嵌套路由、路由守卫等功能2. 为什么需要 Vue Router在现代前端开发中单页面应用SPA已成为主流。Vue Router 使开发者能够实现页面无缝切换通过 URL 管理应用状态优化用户体验无需刷新整个页面实现权限控制和路由守卫二、安装与初始化1. 安装npm install vue-routernext # 或 yarn add vue-routernext2. 基础配置src/router/index.jsimport { 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), routes }) // 4. 全局路由守卫可选 router.beforeEach((to, from) { document.title to.meta.title || 默认标题 }) export default router3. 在 main.js 中使用import { createApp } from vue import router from ./router import App from ./App.vue createApp(App).use(router).mount(#app)4. 在 App.vue 中使用template div h1Vue3 路由示例/h1 nav RouterLink to/首页/RouterLink RouterLink to/about关于/RouterLink /nav main RouterView / /main /div /template三、路由模式Vue Router 支持三种路由模式模式配置特点适用场景HistorycreateWebHistory()无 # 号URL 看起来更美观生产环境推荐HashcreateWebHashHistory()URL 会带 #如/#/about兼容性要求高MemorycreateMemoryHistory()仅在内存中不与 URL 交互测试环境推荐使用 History 模式createWebHistory()这是 Vue3 的默认推荐模式。四、动态路由1. 配置动态路由{ path: /user/:id, name: User, component: () import(/views/User.vue) }2. 传参方式// 使用 name 和 params 传递参数 router.push({ name: User, params: { id: 123 } }) // 使用 path 和 query 传递参数 router.push({ path: /user/123, query: { name: John } })五、嵌套路由1. 配置嵌套路由const routes [ { path: /user, name: User, component: () import(/views/User.vue), children: [ { path: profile, // 相对路径 name: Profile, component: () import(/views/UserProfile.vue) }, { path: settings, // 相对路径 name: Settings, component: () import(/views/UserSettings.vue) } ] } ]2. 在父路由组件中使用 RouterViewtemplate div h2用户页面/h2 RouterLink to/user/profile个人资料/RouterLink RouterLink to/user/settings设置/RouterLink RouterView / !-- 嵌套子路由会在这里渲染 -- /div /template六、参数传递1. params 与 query 的区别特性paramsqueryURL 显示不显示在 URL 中显示在 URL 中?keyvalue传递方式通过 name 和 params通过 path 和 query获取方式route.paramsroute.query适用场景作为唯一标识如用户ID作为查询条件如搜索关键词2. 获取参数// 组合式 API (script setup) import { useRoute } from vue-router const route useRoute() console.log(route.params.id) // 获取 params console.log(route.query.name) // 获取 query七、路由守卫1. 全局前置守卫router.beforeEach((to, from, next) { // 页面标题设置 if (to.meta.title) { document.title ${to.meta.title} - 项目名 } // 权限验证 const token localStorage.getItem(token) const requiresAuth to.matched.some(record record.meta.requiresAuth) if (requiresAuth !token) { next(/login) } else { next() } })2. 路由守卫类型类型说明位置全局前置守卫在导航确认前调用router.beforeEach全局解析守卫在导航被确认前所有组件解析完成前router.beforeResolve全局后置守卫导航完成后调用router.afterEach路由独享守卫在路由配置中定义在路由对象中添加beforeEnter组件内守卫在组件内部定义在组件的beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave八、编程式导航1. 使用router.push()// 通过路径 router.push(/about) // 通过名称 router.push({ name: About }) // 通过路径和参数 router.push({ path: /user/123, query: { name: John } }) router.push({ name: User, params: { id: 123 } })2. 使用router.replace()与push类似但不会向历史记录添加新条目而是替换当前条目。3. 使用router.go(n)router.go(-1) // 后退一页 router.go(1) // 前进一页九、实战案例1. 实现登录权限控制// 在路由配置中添加 meta.requiresAuth { path: /dashboard, name: Dashboard, component: Dashboard, meta: { requiresAuth: true } } // 在路由守卫中实现权限验证 router.beforeEach((to, from, next) { const token localStorage.getItem(token) const requiresAuth to.matched.some(record record.meta.requiresAuth) if (requiresAuth !token) { next(/login) } else { next() } })2. 实现页面标题自动更新router.beforeEach((to, from) { document.title to.meta.title || 默认标题 })十、总结Vue Router 4.x 作为 Vue3 的官方路由库提供了强大且灵活的路由管理能力安装简单npm install vue-routernext配置清晰使用createRouter和createWebHistory创建路由实例功能全面支持动态路由、嵌套路由、参数传递、路由守卫等组合式 API与 Vue3 的 Composition API 完美融合开发体验好提供RouterLink和RouterView组件简化路由导航掌握 Vue Router 是构建 Vue3 单页面应用的基础结合 Pinia 状态管理可以实现完整的企业级应用开发。通过合理使用路由可以打造流畅、高效、用户体验优秀的单页面应用。以上内容基于 Vue Router 4.x 版本与 Vue2 的 Vue Router 3 不兼容请确保使用正确版本。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧