Vue路由原理深度解析：核心机制与实现逻辑

// 基础路由配置示例
import { createRouter, createWebHistory } from 'vue-router'
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/user/:id',
    name: 'UserProfile',
    component: () => import('@/views/UserProfile.vue'),
    props: true
  }
]
 
const router = createRouter({
  history: createWebHistory(),
  routes
})

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

const router = createRouter({
  history: createWebHistory(),
  routes
})

const router = createRouter({
  history: createMemoryHistory(),
  routes
})

// 动态路径参数
const routes = [
  {
    path: '/user/:username/post/:postId',
    component: UserPost,
    // 参数将通过props传递给组件
    props: route => ({ 
      username: route.params.username,
      postId: route.params.postId 
    })
  }
]

// 使用正则表达式进行高级匹配
const routes = [
  {
    // 匹配 /user/123，但不匹配 /user/abc
    path: '/user/:id(\\d+)',
    component: User
  },
  {
    // 匹配任意路径
    path: '/:pathMatch(.*)*',
    component: NotFound
  }
]

// 路由匹配优先级示例
const routes = [
  { path: '/users', component: UsersList },        // 静态路由，优先级最高
  { path: '/users/:id', component: UserDetail },   // 动态参数
  { path: '/:pathMatch(.*)', component: NotFound }  // 通配符，优先级最低
]

// 全局前置守卫
router.beforeEach(async (to, from, next) => {
  // 权限验证逻辑
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})
 
// 全局解析守卫
router.beforeResolve(async (to, from) => {
  // 在导航被确认之前，所有组件内守卫和异步路由组件被解析之后调用
  if (to.meta?.requiresData) {
    await fetchRequiredData(to)
  }
})

export default {
  name: 'UserProfile',
  // 在路由进入前获取数据
  async beforeRouteEnter(to, from, next) {
    try {
      const userData = await fetchUser(to.params.id)
      // 注意：此时组件实例还未创建
      next(vm => {
        vm.userData = userData
      })
    } catch (error) {
      next(false) // 取消导航
    }
  },
  
  // 在当前路由改变但组件被复用时调用
  async beforeRouteUpdate(to, from) {
    this.userData = await fetchUser(to.params.id)
  }
}

// 基础懒加载实现
const routes = [
  {
    path: '/heavy-component',
    component: () => import('@/views/HeavyComponent.vue')
  }
]
 
// 高级懒加载：按组分块
const routes = [
  {
    path: '/admin',
    component: () => import(/* webpackChunkName: "admin" */ '@/views/Admin.vue'),
    children: [
      {
        path: 'users',
        component: () => import(/* webpackChunkName: "admin" */ '@/views/admin/Users.vue')
      }
    ]
  }
]
 
// 结合Webpack魔法注释的优化
const routes = [
  {
    path: '/optimization',
    component: () => import(
      /* webpackChunkName: "optimization" */
      /* webpackPrefetch: true */
      '@/views/Optimization.vue'
    )
  }
]

// 动态添加路由的实现
export function addDynamicRoutes(userPermissions) {
  const dynamicRoutes = []
  
  if (userPermissions.includes('admin')) {
    dynamicRoutes.push({
      path: '/admin',
      name: 'AdminDashboard',
      component: () => import('@/views/admin/Dashboard.vue'),
      meta: { requiresAuth: true, permission: 'admin' }
    })
  }
  
  // 使用addRoute动态添加
  dynamicRoutes.forEach(route => {
    router.addRoute(route)
  })
  
  // 添加嵌套路由
  router.addRoute('AdminDashboard', {
    path: 'users',
    name: 'UserManagement',
    component: () => import('@/views/admin/UserManagement.vue')
  })
}

// 基于权限的动态路由守卫
router.beforeEach(async (to, from, next) => {
  // 获取用户权限
  const userPermissions = await getUserPermissions()
  
  // 检查路由是否需要特定权限
  if (to.meta?.permission) {
    if (!userPermissions.includes(to.meta.permission)) {
      next('/403') // 无权限页面
      return
    }
  }
  
  next()
})

// stores/router.js
import { defineStore } from 'pinia'
import { useRouter } from 'vue-router'
 
export const useRouterStore = defineStore('router', {
  state: () => ({
    history: [],
    currentRoute: null,
    navigationHistory: new Map()
  }),
  
  actions: {
    recordNavigation(route) {
      this.history.push({
        path: route.path,
        name: route.name,
        timestamp: Date.now(),
        query: route.query,
        params: route.params
      })
      
      // 限制历史记录长度
      if (this.history.length > 100) {
        this.history.shift()
      }
    },
    
    getNavigationPattern() {
      // 分析用户的导航模式
      const patterns = {}
      this.history.forEach(record => {
        const key = `${record.name || 'unnamed'}_${Object.keys(record.query).sort().join(',')}`
        patterns[key] = (patterns[key] || 0) + 1
      })
      return patterns
    }
  }
})
 
// 在路由守卫中使用
router.afterEach((to, from) => {
  const routerStore = useRouterStore()
  routerStore.recordNavigation(to)
})

export default {
  name: 'DataIntensiveComponent',
  
  data() {
    return {
      isDataLoaded: false,
      abortController: null
    }
  },
  
  async beforeRouteEnter(to, from, next) {
    // 在组件创建前预加载数据
    const abortController = new AbortController()
    
    try {
      const data = await fetchIntensiveData(to.params.id, {
        signal: abortController.signal
      })
      
      next(vm => {
        vm.initializeWithData(data)
        vm.abortController = abortController
      })
    } catch (error) {
      if (error.name !== 'AbortError') {
        next(false)
      }
    }
  },
  
  beforeRouteLeave(to, from, next) {
    // 清理资源
    if (this.abortController) {
      this.abortController.abort()
    }
    
    // 如果有未保存的更改，提示用户
    if (this.hasUnsavedChanges) {
      const confirmLeave = window.confirm('您有未保存的更改，确定要离开吗？')
      if (!confirmLeave) {
        next(false)
        return
      }
    }
    
    next()
  },
  
  methods: {
    initializeWithData(data) {
      this.processedData = this.processRawData(data)
      this.isDataLoaded = true
    },
    
    processRawData(rawData) {
      // 复杂的数据处理逻辑
      return rawData.map(item => ({
        ...item,
        computed: this.performComplexCalculation(item)
      }))
    }
  }
}

// 多标签页路由管理
export function createMultiTabRouter() {
  const router = createRouter({
    history: createWebHistory(),
    routes: baseRoutes
  })
  
  // 标签页状态管理
  const tabState = {
    openedTabs: new Map(),
    activeTab: null,
    cacheViews: new Set()
  }
  
  router.beforeEach((to, from, next) => {
    // 处理标签页逻辑
    if (to.meta?.keepAlive) {
      tabState.cacheViews.add(to.name)
    }
    
    // 更新活动标签页
    tabState.activeTab = {
      name: to.name,
      path: to.path,
      title: to.meta?.title || to.name,
      query: to.query,
      params: to.params
    }
    
    // 添加到已打开标签页
    if (!tabState.openedTabs.has(to.path)) {
      tabState.openedTabs.set(to.path, {
        ...tabState.activeTab,
        closable: to.meta?.closable !== false
      })
    }
    
    next()
  })
  
  return { router, tabState }
}

// 智能面包屑生成器
export function generateBreadcrumbs(route) {
  const breadcrumbs = []
  const matched = route.matched
  
  matched.forEach((match, index) => {
    if (match.meta?.breadcrumb) {
      const breadcrumb = {
        text: typeof match.meta.breadcrumb === 'function' 
          ? match.meta.breadcrumb(route)
          : match.meta.breadcrumb,
        to: index === matched.length - 1 
          ? null  // 当前页面不可点击
          : { name: match.name, params: route.params }
      }
      breadcrumbs.push(breadcrumb)
    }
  })
  
  return breadcrumbs
}
 
// 在路由配置中使用
const routes = [
  {
    path: '/products',
    name: 'Products',
    component: ProductsLayout,
    meta: {
      breadcrumb: '产品管理'
    },
    children: [
      {
        path: ':category',
        name: 'ProductCategory',
        component: ProductCategory,
        meta: {
          breadcrumb: route => `分类: ${route.params.category}`
        }
      }
    ]
  }
]

// 智能代码分割策略
const createAsyncComponent = (importFn, options = {}) => {
  return defineAsyncComponent({
    loader: importFn,
    delay: 200,
    timeout: 5000,
    suspensible: false,
    onError(error, retry, fail, attempts) {
      if (error.message.match(/fetch/) && attempts <= 3) {
        // 网络错误时重试
        retry()
      } else {
        // 其他错误显示降级组件
        fail()
      }
    },
    ...options
  })
}
 
// 优化的路由配置
const routes = [
  {
    path: '/dashboard',
    component: createAsyncComponent(
      () => import('@/views/Dashboard.vue'),
      { 
        loadingComponent: DashboardSkeleton,
        errorComponent: DashboardError 
      }
    ),
    children: [
      {
        path: 'analytics',
        component: createAsyncComponent(
          () => import('@/views/dashboard/Analytics.vue'),
          { 
            delay: 300, // 延迟显示加载状态，避免闪烁
            timeout: 10000 
          }
        )
      }
    ]
  }
]

// 智能预加载管理器
class RoutePreloader {
  constructor(router, options = {}) {
    this.router = router
    this.options = {
      maxConcurrent: 2,
      delay: 100,
      threshold: 0.1,
      ...options
    }
    this.preloadQueue = []
    this.activePreloads = 0
    this.observer = null
    this.initIntersectionObserver()
  }
  
  initIntersectionObserver() {
    this.observer = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const link = entry.target
            const route = this.getRouteFromLink(link)
            if (route) {
              this.queuePreload(route)
            }
          }
        })
      },
      { threshold: this.options.threshold }
    )
  }
  
  queuePreload(route) {
    if (this.preloadQueue.includes(route)) return
    
    this.preloadQueue.push(route)
    this.processQueue()
  }
  
  async processQueue() {
    if (this.activePreloads >= this.options.maxConcurrent) return
    
    const route = this.preloadQueue.shift()
    if (!route) return
    
    this.activePreloads++
    
    setTimeout(async () => {
      try {
        if (typeof route.component === 'function') {
          await route.component()
        }
      } catch (error) {
        console.warn(`预加载路由失败: ${route.path}`, error)
      } finally {
        this.activePreloads--
        this.processQueue()
      }
    }, this.options.delay)
  }
  
  observe(linkElement) {
    this.observer.observe(linkElement)
  }
  
  getRouteFromLink(link) {
    const href = link.getAttribute('href')
    return this.router.getRoutes().find(route => route.path === href)
  }
}
 
// 使用示例
const preloader = new RoutePreloader(router)
 
// 在组件中使用
export default {
  mounted() {
    // 为所有路由链接添加预加载观察
    this.$nextTick(() => {
      const links = document.querySelectorAll('a[href^="/"]')
      links.forEach(link => preloader.observe(link))
    })
  }
}

// 路由性能监控器
export function setupRoutePerformanceMonitor(router) {
  const performanceData = {
    navigationTimings: [],
    slowNavigations: [],
    errorRoutes: []
  }
  
  router.beforeEach((to, from, next) => {
    // 记录导航开始时间
    to.meta.navigationStart = performance.now()
    to.meta.navigationType = from.name ? 'client' : 'initial'
    next()
  })
  
  router.afterEach((to, from) => {
    const navigationTime = performance.now() - to.meta.navigationStart
    
    // 记录导航时间
    performanceData.navigationTimings.push({
      from: from.fullPath,
      to: to.fullPath,
      duration: navigationTime,
      timestamp: Date.now(),
      type: to.meta.navigationType
    })
    
    // 检测慢导航
    if (navigationTime > 1000) {
      performanceData.slowNavigations.push({
        route: to.fullPath,
        duration: navigationTime,
        timestamp: Date.now()
      })
      
      // 上报性能问题
      reportPerformanceIssue({
        type: 'slow_navigation',
        route: to.fullPath,
        duration: navigationTime,
        userAgent: navigator.userAgent
      })
    }
    
    // 清理旧数据
    if (performanceData.navigationTimings.length > 1000) {
      performanceData.navigationTimings = 
        performanceData.navigationTimings.slice(-500)
    }
  })
  
  router.onError((error, to, from) => {
    performanceData.errorRoutes.push({
      error: error.message,
      from: from.fullPath,
      to: to.fullPath,
      timestamp: Date.now()
    })
    
    // 上报路由错误
    reportError({
      type: 'route_error',
      error: error.message,
      stack: error.stack,
      route: to.fullPath
    })
  })
  
  return performanceData
}