Vue3 + Vite 项目技术博客 - 路由与导航篇
技术栈与环境
- 前端框架: Vue 3.2+
- 路由管理: Vue Router 4+
- 构建工具: Vite 4+
- UI 组件库: Element Plus
- 状态管理: Pinia 2+
- 开发语言: JavaScript/ES6+
- 运行环境: Node.js 16+
- HTTP 客户端: Axios (用于权限验证等)
背景问题：
需要实现单页面应用的路由管理。
方案思考：
使用 Vue Router 4+ 进行路由配置和管理。
具体实现：
// router/index.jsimport{createRouter,createWebHistory}from'vue-router'importLayoutfrom'@/layout/index.vue'// 静态路由 - 不需要权限的路由exportconstconstantRoutes=[{path:'/login',name:'Login',component:()=>import('@/views/login/index.vue'),meta:{title:'登录'}},{path:'/404',name:'NotFound',component:()=>import('@/views/error/404.vue'),meta:{title:'页面不存在'}},{path:'/',component:Layout,redirect:'/dashboard',children:[{path:'dashboard',name:'Dashboard',component:()=>import('@/views/dashboard/index.vue'),meta:{title:'首页',icon:'House'}}]}]// 异步路由 - 需要权限的路由exportconstasyncRoutes=[{path:'/user',component:Layout,redirect:'/user/list',meta:{title:'用户管理',icon:'User',roles:['admin']},children:[{path:'list',name:'UserList',component:()=>import('@/views/user/list.vue'),meta:{title:'用户列表',roles:['admin']}},{path:'add',name:'UserAdd',component:()=>import('@/views/user/add.vue'),meta:{title:'添加用户',roles:['admin']}}]}]constrouter=createRouter({history:createWebHistory(),routes:constantRoutes,scrollBehavior:()=>({left:0,top:0})})exportdefaultrouter路由配置工具：
// utils/router.js// 动态路由处理工具exportclassRouterUtils{// 根据角色过滤路由staticfilterRoutes(routes,roles){constres=[]routes.forEach(route=>{consttmp={...route}if(hasPermission(roles,tmp)){if(tmp.children){tmp.children=this.filterRoutes(tmp.children,roles)}res.push(tmp)}})returnres}// 检查路由权限statichasPermission(roles,route){if(route.meta&&route.meta.roles){returnroles.some(role=>route.meta.roles.includes(role))}else{returntrue}}// 获取路由参数staticgetRouteParams(route){return{path:route.path,name:route.name,meta:route.meta,query:route.query,params:route.params}}}
)
)
