Vue3路由高级玩法实战指南从模块化到企业级实践

src/
├── router/
│   ├── index.js          # 路由入口
│   ├── modules/          # 路由模块拆分
│   │   ├── home.js       # 首页路由
│   │   ├── user.js       # 用户模块路由
│   │   └── admin.js      # 管理后台路由
│   └── config.js         # 路由拦截配置
└── views/                # 页面组件目录

// src/router/modules/user.js
export default [
  {
    path: '/user',
    name: 'User',
    component: () => import('@/views/user/index.vue'),
    meta: {
      title: '用户中心',
      requiresAuth: true,
      keepAlive: false
    },
    children: [
      {
        path: 'profile',
        name: 'UserProfile',
        component: () => import('@/views/user/profile.vue'),
        meta: {
          title: '个人资料',
          requiresAuth: true
        }
      }
    ]
  }
]

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import homeRoutes from './modules/home'
import userRoutes from './modules/user'
import { setupRouterGuard } from './config'
const routes = [
  ...homeRoutes,
  ...userRoutes,
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/404.vue'),
    meta: { title: '页面不存在' }
  }
]
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior: (to, from, savedPosition) => {
    return savedPosition || { top: 0 }
  }
})
setupRouterGuard(router)
export default router

// src/router/config.js
export function setupRouterGuard(router) {
  router.beforeEach(async (to, from) => {
    const userStore = useUserStore()
    // 统一设置页面标题
    if (to.meta.title) {
      document.title = to.meta.title
    }
    // 白名单处理
    const whiteList = ['/login', '/register']
    if (whiteList.includes(to.path)) {
      return
    }
    // 登录状态验证
    if (to.meta.requiresAuth && !userStore.isAuthenticated) {
      return {
        name: 'Login',
        query: { redirect: to.fullPath }
      }
    }
    // 角色权限验证
    if (to.meta.roles) {
      const hasPermission = await checkPermissions(to.meta.roles)
      if (!hasPermission) {
        return { name: 'Forbidden' }
      }
    }
  })
}

// 特定路由的权限控制
{
  path: '/admin',
  component: AdminPanel,
  beforeEnter: (to) => {
    const businessHours = new Date().getHours()
    if (businessHours < 9 || businessHours > 18) {
      return {
        path: '/off-hours',
        query: { message: '非工作时间访问' }
      }
    }
  }
}

// 表单未保存提示
export default {
  beforeRouteLeave(to, from, next) {
    if (this.formData.isDirty && !confirm('表单未保存，确定离开吗？')) {
      next(false) // 取消导航
    } else {
      next()
    }
  }
}

// 动态路由过滤算法
function filterRoutes(routes, permissions) {
  return routes.filter(route => {
    if (route.meta?.permissions) {
      return route.meta.permissions.some(p => permissions.includes(p))
    }
    return true
  })
}
// 动态添加路由
async function setupDynamicRoutes(userRole) {
  const allowedRoutes = adminRoutes.filter(route => 
    route.meta.role === userRole || route.meta.role === 'all'
  )
  allowedRoutes.forEach(route => {
    router.addRoute(route)
  })
}

// 权限管理核心类
class PermissionManager {
  constructor() {
    this.permissions = new Map()
    this.roles = new Map()
    this.userRoles = new Map()
    this.rolePermissions = new Map()
  }
  // 检查用户是否有特定权限
  hasPermission(userId, permissionId) {
    const userRoles = this.userRoles.get(userId) || new Set()
    for (const roleId of userRoles) {
      const rolePerms = this.rolePermissions.get(roleId)
      if (rolePerms && rolePerms.has(permissionId)) {
        return true
      }
    }
    return false
  }
}

// 自定义权限指令
const permission = {
  mounted(el, binding) {
    const { value } = binding
    const userStore = useUserStore()
    if (value && value.length > 0) {
      const hasPermission = userStore.permissions.some(permission => {
        return value.includes(permission)
      })
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  }
}
// 注册指令
app.directive('permission', permission)
// 使用示例
<button v-permission="['user:add', 'user:edit']">操作按钮</button>

// Webpack动态导入
const UserProfile = () => import('./views/UserProfile.vue')
// Vite + 分组优化
const AdminDashboard = () => import(
  /* webpackChunkName: "admin" */
  /* vitePreload: true */
  '@/views/Admin/Dashboard.vue'
)
// 路由配置中使用
const routes = [
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

// 手动预加载关键路由
router.beforeEach((to) => {
  if (to.meta.preload) {
    to.matched.forEach(matched => {
      if (matched.components) {
        Object.values(matched.components).forEach(component => {
          if (typeof component === 'function') {
            component()
          }
        })
      }
    })
  }
})
// 组件级数据预加载
{
  path: '/user/:id',
  component: UserProfile,
  meta: {
    requiresData: true,
    preload: async (to) => {
      return await fetchUserData(to.params.id)
    }
  }
}

const pendingRequests = new Map()
async function deduplicatedFetch(url) {
  if (pendingRequests.has(url)) {
    return pendingRequests.get(url)
  }
  const promise = fetch(url).then(response => {
    pendingRequests.delete(url)
    return response
  })
  pendingRequests.set(url, promise)
  return promise
}
// 数据缓存
const dataCache = new Map()
async function getCachedData(key, fetcher) {
  if (dataCache.has(key)) {
    return dataCache.get(key)
  }
  const data = await fetcher()
  dataCache.set(key, data)
  return data
}

const router = createRouter({
  scrollBehavior: (to, from, savedPosition) => {
    // 有保存的位置时（如浏览器前进/后退）
    if (savedPosition) {
      return savedPosition
    }
    // 存在哈希锚点时
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth',
        top: 80 // 添加偏移量，避免被固定导航栏遮挡
      }
    }
    // 为特定路由禁用自动滚动
    if (to.meta.noScroll) {
      return false
    }
    // 默认滚动到顶部
    return { top: 0, left: 0 }
  }
})

<template>
  <router-view v-slot="{ Component, route }">
    <transition
      :name="route.meta.transition || 'fade'"
      mode="out-in"
      @before-enter="beforeEnter"
      @after-enter="afterEnter"
    >
      <component :is="Component" :key="route.path" />
    </transition>
  </router-view>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.3s ease;
}
.slide-left-enter-from {
  transform: translateX(100%);
}
.slide-left-leave-to {
  transform: translateX(-100%);
}
</style>

// 路由配置
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { transition: 'zoom' }
  },
  {
    path: '/settings',
    component: Settings,
    meta: { transition: 'fade' }
  }
]

// 基座应用路由配置
const baseRoutes = [
  { path: '/', component: Home },
  { path: '/app1/*', component: App1Container },
  { path: '/app2/*', component: App2Container }
]
// 动态注册子应用路由
function registerMicroAppRoutes(appName, routes) {
  routes.forEach(route => {
    router.addRoute({
      path: `/${appName}${route.path}`,
      component: route.component,
      meta: { ...route.meta, microApp: appName }
    })
  })
}

// 扩展RouteMeta类型
declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    roles?: string[]
    permissions?: string[]
    transition?: string
    keepAlive?: boolean
    title?: string
    noScroll?: boolean
    preload?: boolean
  }
}
// 类型安全的路由配置
import { RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
  {
    path: '/user/:id',
    name: 'UserDetail',
    component: () => import('@/views/UserDetail.vue'),
    props: (route) => ({ id: Number(route.params.id) }),
    meta: {
      requiresAuth: true,
      roles: ['admin', 'user']
    }
  }
]

// 全局错误处理
router.onError((error, to) => {
  if (error.message.includes('Failed to fetch')) {
    router.push({
      name: 'NetworkError',
      query: { path: to.fullPath }
    })
  }
  // 记录错误日志
  logError(error, {
    route: to.fullPath,
    timestamp: Date.now()
  })
})
// 导航循环检测
router.beforeEach((to, from) => {
  if (to.name === 'Login' && from.name === 'Login') {
    console.warn('检测到导航循环，已终止')
    return false
  }
})