vue3学习日记(十六)：路由配置详解
路由配置基础
Vue Router 是 Vue.js 官方的路由管理器，与 Vue.js 核心深度集成。在 Vue3 中，路由配置基本延续了 Vue2 的架构，但进行了 Composition API 的适配。
安装依赖：
npm install vue-router@4
基础路由配置：
import { createRouter, createWebHistory } from 'vue-router';const routes = [{ path: '/', component: Home },{ path: '/about', component: About },
];const router = createRouter({history: createWebHistory(),routes,
});export default router;
动态路由匹配
通过 :param 定义动态路径参数，例如用户详情页：
const routes = [{ path: '/user/:id', component: User },
];
组件中获取参数：
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params.id); // 输出动态参数
嵌套路由配置
嵌套路由适合有公共布局的页面结构，如后台管理系统中的侧边栏布局。
const routes = [{path: '/admin',component: AdminLayout,children: [{ path: 'dashboard', component: Dashboard },{ path: 'settings', component: Settings },],},
];
路由导航守卫
导航守卫主要用来控制路由的访问权限和执行路由切换时的逻辑。
全局前置守卫示例：
router.beforeEach((to, from, next) => {const isAuthenticated = checkAuth()if (to.meta.requiresAuth && !isAuthenticated) {next('/login')} else {next()}
})路由独享守卫：
const routes = [{path: '/profile',component: Profile,beforeEnter: () => checkPermission(),},
];
路由懒加载
路由懒加载可以显著提高应用初始加载速度，通过动态 import 实现代码分割。
const routes = [{ path: '/help', component: () => import('./Help.vue') },
];
路由元信息
路由元信息 meta 字段可以用来存储路由相关的额外信息，如页面标题、权限要求等。
{path: '/admin',component: AdminPanel,meta: { requiresAuth: true }
}访问元信息：
router.beforeEach((to, from, next) => {const requiresAuth = to.matched.some(record => record.meta.requiresAuth)// 处理逻辑
})编程式导航
常用导航方法：
import { useRouter } from 'vue-router'const router = useRouter()// 跳转路径
router.push('/home')// 带参数跳转
router.push({ name: 'user', params: { id: '123' } })// 替换当前路由
router.replace('/login')// 前进/后退
router.go(1)
router.go(-1)滚动行为控制
可以自定义路由切换时的滚动位置，提升用户体验。
const router = createRouter({scrollBehavior(to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { top: 0 }}}
})路由过渡效果
Vue Router 与 Vue 的过渡系统集成良好，可以为路由切换添加动画效果。
<router-view v-slot="{ Component }"><transition name="fade" mode="out-in"><component :is="Component" /></transition>
</router-view>对应的 CSS 过渡样式：
.fade-enter-active,
.fade-leave-active {transition: opacity 0.3s ease;
}.fade-enter-from,
.fade-leave-to {opacity: 0;
}路由模式选择
- Hash 模式：通过 URL 的 hash 实现（
createWebHashHistory），兼容性更好。 - History 模式：依赖 HTML5 History API（
createWebHistory），需服务器配置支持。
history: createWebHistory() // 或 createWebHashHistory()路由使用场景分析
- 单页应用核心导航：Vue Router 是构建单页应用不可或缺的部分，管理着应用的所有视图切换。
- 权限控制场景：通过路由守卫实现基于角色的访问控制，保护敏感路由。
- 复杂布局管理：嵌套路由可以帮助组织具有复杂布局结构的应用。
- 动态内容加载：动态路由匹配使得根据参数加载不同内容变得简单。
- 页面过渡动画：路由过渡效果可以提升应用的用户体验和现代感。
总结与建议
- 路由模块化：将大型应用的路由配置拆分为多个模块，按功能组织。
- 合理使用懒加载：对非核心路由使用懒加载，优化初始加载性能。
- 路由命名规范：为每个路由设置有意义的 name 属性，便于维护和导航。
- 守卫逻辑复用：将通用的守卫逻辑提取为工具函数，避免代码重复。
- 路由配置验证：使用 TypeScript 可以为路由配置添加类型安全。
- 性能监控：对路由切换进行性能分析，确保用户体验流畅。
完整配置示例参考 Vue Router 官方文档。