当前位置：首页 > news >正文

Vue——路由与导航篇之路由设计

news 2026/5/12 7:55:53

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}}}