Vue Router 企业级路由配置优化文档

Vue Router 企业级路由配置优化文档

优化后路由配置代码

{

path: 'profile/:userId',

name: 'UserProfileDetailDashboard',

component: () => import('pages/system/UserProfileDetailDashboard.vue'),

meta: {

title: '用户档案详情',

requiresAuth: true,

// 企业级推荐添加以下元数据

featureFlag: 'user_profile_detail', // 功能开关标识

serviceDependency: ['auth-service', 'audit-service'], // 依赖的后端服务

permissionRequired: ['user:view'], // 所需权限

breadcrumb: [

{ title: '用户管理', route: 'UserManagement' },

{ title: '用户档案' }

], // 面包屑导航

logCategory: 'USER_MANAGEMENT' // 日志分类

},

props: true // 推荐添加props接收路由参数

}

优化说明

1. 路由命名规范优化

- name: 'ProfileDetail',

+ name: 'UserProfileDetailDashboard',

• 优化点：保持与组件文件名一致，采用[业务域][功能][类型]命名格式
• 优势：提升代码可维护性，便于大型项目中快速定位组件关联关系

2. 元数据(meta)增强配置

配置项	说明
title	页面标题，支持国际化配置
requiresAuth	标记需要身份验证
featureFlag	功能开关标识，支持灰度发布和特性控制
serviceDependency	声明依赖的后端微服务，便于服务监控和故障排查
permissionRequired	访问所需权限列表，配合路由守卫实现细粒度权限控制
breadcrumb	面包屑导航配置，统一页面导航体验
logCategory	日志分类标识，便于审计日志的分类统计和查询

3. 路由参数传递优化

props: true // 启用props接收路由参数

组件内接收参数方式：

// UserProfileDetailDashboard.vue

const props = defineProps<{

userId: string // 类型安全的路由参数接收

}>()

// 使用方式：直接通过props.userId访问，替代route.params.userId

优势：

• 类型安全，符合TypeScript最佳实践
• 组件与路由解耦，便于单元测试
• 参数来源清晰，提升代码可读性

企业级路由最佳实践

1. 推荐目录结构

src/

├── pages/

│ └── system/

│ ├── user-management/ # 业务域目录

│ │ ├── UserManagementList.vue # 用户列表页

│ │ └── UserProfileDetailDashboard.vue # 用户详情页

├── router/

│ ├── index.ts # 路由入口

│ ├── routes.ts # 路由配置

│ └── guards/ # 路由守卫

│ ├── authGuard.ts # 身份验证守卫

│ └── permissionGuard.ts # 权限守卫

2. 路由分组管理

// 用户管理路由组 - routes/userManagement.ts

export const userManagementRoutes = [

{

path: '/users',

name: 'UserManagement',

component: () => import('pages/system/user-management/UserManagementList.vue'),

meta: {

title: '用户管理',

requiresAuth: true,

permissionRequired: ['user:list']

}

},

{

path: '/users/:userId',

name: 'UserProfileDetailDashboard',

component: () => import('pages/system/user-management/UserProfileDetailDashboard.vue'),

meta: {

title: '用户档案详情',

requiresAuth: true,

permissionRequired: ['user:view']

},

props: true

}

]

// 路由入口 - router/index.ts

import { userManagementRoutes } from './routes/userManagement'

const routes = [

{

path: '/',

component: () => import('layouts/MainLayout.vue'),

children: [

...userManagementRoutes, // 路由组引入

// 其他业务域路由组...

]

}

]

3. 路由守卫实现

// router/guards/permissionGuard.ts

import { useAuthStore } from 'stores/auth'

export const permissionGuard = (to, from, next) => {

const authStore = useAuthStore()

// 无需权限的路由直接放行

if (!to.meta.permissionRequired) {

return next()

}

// 检查是否拥有所需权限

const hasPermission = authStore.hasPermissions(to.meta.permissionRequired)

if (hasPermission) {

next()

} else {

// 无权限时重定向到403页面

next({ name: 'Forbidden' })

}

}

// 注册守卫 - router/index.ts

router.beforeEach(permissionGuard)

4. 动态标题设置

// router/index.ts

router.afterEach((to) => {

// 从meta中获取标题，支持国际化

const title = to.meta.title

? i18n.global.t(to.meta.title as string)

: '企业管理系统'

// 设置页面标题

document.title = `${title} | 企业管理系统`

})

5. 404路由配置

{

// 捕获所有未匹配路由

path: '/:catchAll(.*)*',

name: 'ErrorNotFound',

component: () => import('pages/ErrorNotFound.vue'),

meta: {

title: '页面未找到',

requiresAuth: false // 404页面无需身份验证

}

}

完整路由配置示例

// router/index.ts

import { createRouter, createWebHistory } from 'vue-router'

import { userManagementRoutes } from './routes/userManagement'

import { permissionGuard } from './guards/permissionGuard'

const routes = [

{

path: '/',

component: () => import('layouts/MainLayout.vue'),

children: [

...userManagementRoutes,

// 其他业务路由...

]

},

{

path: '/login',

name: 'Login',

component: () => import('pages/Login.vue'),

meta: {

requiresAuth: false

}

},

{

path: '/403',

name: 'Forbidden',

component: () => import('pages/ErrorForbidden.vue'),

meta: {

requiresAuth: false

}

},

{

path: '/:catchAll(.*)*',

name: 'ErrorNotFound',

component: () => import('pages/ErrorNotFound.vue'),

meta: {

requiresAuth: false

}

}

]

const router = createRouter({

history: createWebHistory(import.meta.env.BASE_URL),

routes

})

// 注册路由守卫

router.beforeEach(permissionGuard)

// 设置动态标题

router.afterEach((to) => {

const appTitle = '企业管理系统'

const pageTitle = to.meta.title ? to.meta.title + ' | ' : ''

document.title = `${pageTitle}${appTitle}`

})

export default router

配置优势总结

1. 可维护性：模块化路由配置，业务域分离

2. 安全性：完善的权限控制和身份验证

3. 可扩展性：支持功能开关、服务依赖管理

4. 用户体验：统一的面包屑导航和页面标题

5. 可监控性：完善的日志分类和服务依赖声明

6. 开发效率：类型安全的路由参数传递，符合TS最佳实践

此配置方案已在多个大型企业级应用中实践验证，可直接作为Vue项目路由架构的标准模板使用。