Vue路由的几种核心方式详解与实战应用

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
 
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue')
    }
  ]
})
 
export default router

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
 
const router = createRouter({
  history: createWebHistory('/app/'), // 基础路径配置
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home.vue'),
      meta: { title: '首页' }
    },
    {
      path: '/product/:id',
      component: () => import('@/views/ProductDetail.vue'),
      props: true, // 将路由参数作为props传递
      meta: { title: '产品详情' }
    }
  ]
})

location / {
    try_files $uri $uri/ /index.html;
}

// router/index.js
import { createRouter, createMemoryHistory } from 'vue-router'
 
const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    { path: '/', component: () => import('@/views/Home.vue') },
    { path: '/admin', component: () => import('@/views/Admin.vue') }
  ]
})
 
// SSR场景中使用
export function createApp() {
  const app = createApp(App)
  app.use(router)
  return { app, router }
}

// 输入自然语言：创建一个带权限控制的路由配置
// TRAE AI自动生成：
import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
 
const routes = [
  {
    path: '/',
    component: () => import('@/layouts/DefaultLayout.vue'),
    children: [
      { path: '', component: () => import('@/views/Home.vue') },
      { path: 'about', component: () => import('@/views/About.vue') }
    ]
  },
  {
    path: '/admin',
    component: () => import('@/layouts/AdminLayout.vue'),
    meta: { requiresAuth: true, roles: ['admin'] },
    children: [
      { path: 'dashboard', component: () => import('@/views/admin/Dashboard.vue') },
      { path: 'users', component: () => import('@/views/admin/Users.vue') }
    ]
  }
]
 
const router = createRouter({
  history: createWebHistory(),
  routes
})
 
// 导航守卫
router.beforeEach(async (to, from, next) => {
  const authStore = useAuthStore()
  
  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    next('/login')
  } else if (to.meta.roles && !authStore.hasRole(to.meta.roles)) {
    next('/403')
  } else {
    next()
  }
})

// 问题代码示例
{
  path: '/user/:id',
  component: UserDetail,
  props: route => ({ 
    id: route.params.id,
    // ⚠️ TRAE提示：直接传递params可能导致类型安全问题
    query: route.query 
  })
}
 
// TRAE建议优化版本
{
  path: '/user/:id',
  component: UserDetail,
  props: route => ({
    id: Number(route.params.id), // 类型转换
    query: { ...route.query } // 创建副本避免直接引用
  })
}

// 在TRAE中启用路由性能监控
import { createRouter } from 'vue-router'
import { performanceMonitor } from '@trae/performance'
 
const router = createRouter({
  history: createWebHistory(),
  routes
})
 
// 自动记录路由切换性能
router.beforeEach((to, from, next) => {
  performanceMonitor.startNavigation(to.fullPath)
  next()
})
 
router.afterEach((to, from) => {
  performanceMonitor.endNavigation(to.fullPath, {
    routeName: to.name,
    componentLoadTime: Date.now() - navigationStart
  })
})

// 全局前置守卫
router.beforeEach(async (to, from, next) => {
  // 进度条开始
  NProgress.start()
  
  // 设置页面标题
  document.title = to.meta.title || '默认标题'
  
  // 权限验证
  if (to.meta.requiresAuth) {
    const token = getToken()
    if (!token) {
      next('/login')
      return
    }
    
    // 验证token有效性
    try {
      await validateToken(token)
      next()
    } catch (error) {
      removeToken()
      next('/login')
    }
  } else {
    next()
  }
})
 
// 全局后置守卫
router.afterEach((to, from) => {
  NProgress.done()
  
  // 埋点统计
  analytics.track('PageView', {
    page: to.fullPath,
    referrer: from.fullPath
  })
})
 
// 路由独享守卫
{
  path: '/premium',
  component: () => import('@/views/Premium.vue'),
  beforeEnter: (to, from, next) => {
    const userStore = useUserStore()
    if (!userStore.isPremium) {
      next('/upgrade')
    } else {
      next()
    }
  }
}

// 基础懒加载
const Home = () => import('@/views/Home.vue')
 
// 分组懒加载（推荐）
const UserList = () => import(/* webpackChunkName: "user" */ '@/views/user/List.vue')
const UserDetail = () => import(/* webpackChunkName: "user" */ '@/views/user/Detail.vue')
const UserProfile = () => import(/* webpackChunkName: "user" */ '@/views/user/Profile.vue')
 
// 预加载策略
const HeavyComponent = () => import(
  /* webpackChunkName: "heavy" */
  /* webpackPrefetch: true */
  '@/views/HeavyComponent.vue'
)
 
// 路由级别代码分割
const routes = [
  {
    path: '/',
    component: () => import('@/layouts/MainLayout.vue'),
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/Dashboard.vue'),
        // 条件懒加载：根据用户权限决定加载哪个版本
        beforeEnter: async (to, from, next) => {
          const userStore = useUserStore()
          if (userStore.hasAdvancedFeatures) {
            to.matched[0].components = {
              default: () => import('@/views/DashboardAdvanced.vue')
            }
          }
          next()
        }
      }
    ]
  }
]

// 路由配置
{
  path: '/product/:id',
  component: () => import('@/views/Product.vue'),
  meta: {
    title: '商品详情',
    requiresAuth: true,
    permissions: ['product:view'],
    keepAlive: true, // 是否缓存组件
    breadcrumb: [
      { name: '首页', path: '/' },
      { name: '商品列表', path: '/products' },
      { name: '商品详情' }
    ]
  }
}
 
// 动态面包屑实现
<template>
  <nav class="breadcrumb">
    <router-link 
      v-for="(item, index) in breadcrumbs" 
      :key="index"
      :to="item.path"
      :class="{ active: index === breadcrumbs.length - 1 }">
      {{ item.name }}
    </router-link>
  </nav>
</template>
 
<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
 
const route = useRoute()
const breadcrumbs = computed(() => {
  const matched = route.matched.filter(item => item.meta?.breadcrumb)
  return matched.flatMap(item => item.meta.breadcrumb)
})
</script>

// 方法1：捕获异常
this.$router.push('/path').catch(err => {
  if (err.name !== 'NavigationDuplicated') {
    throw err
  }
})
 
// 方法2：重写push方法（推荐）
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
 
// 方法3：使用replace替代
this.$router.replace('/path')

// 动态路由管理
export const dynamicRoutes = {
  admin: [
    {
      path: '/admin/users',
      component: () => import('@/views/admin/Users.vue'),
      meta: { title: '用户管理', icon: 'users' }
    },
    {
      path: '/admin/settings',
      component: () => import('@/views/admin/Settings.vue'),
      meta: { title: '系统设置', icon: 'settings' }
    }
  ],
  user: [
    {
      path: '/profile',
      component: () => import('@/views/Profile.vue'),
      meta: { title: '个人中心', icon: 'profile' }
    }
  ]
}
 
// 权限路由加载
async function loadPermissionRoutes() {
  const userStore = useUserStore()
  const userRoles = userStore.roles
  
  // 获取用户对应的路由配置
  const routes = userRoles.flatMap(role => dynamicRoutes[role] || [])
  
  // 动态添加路由
  routes.forEach(route => {
    router.addRoute('main', route) // 添加到main路由下
  })
  
  // 刷新菜单
  await router.replace(router.currentRoute.value.fullPath)
}

<template>
  <router-view v-slot="{ Component, route }">
    <keep-alive :include="cachedViews">
      <component :is="Component" :key="route.fullPath" />
    </keep-alive>
  </router-view>
</template>
 
<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
 
const router = useRouter()
const cachedViews = computed(() => {
  return router.getRoutes()
    .filter(route => route.meta?.keepAlive)
    .map(route => route.components?.default?.name)
    .filter(Boolean)
})
</script>

// 自定义滚动行为
const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    }
    
    // 锚点定位
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth',
        top: 80 // 偏移量
      }
    }
    
    // 根据meta信息决定是否记住滚动位置
    if (from.meta?.rememberScroll && to.meta?.rememberScroll) {
      return false // 保持当前滚动位置
    }
    
    // 默认滚动到顶部
    return { top: 0, left: 0 }
  }
})

// 性能监控装饰器
function withPerformanceMonitoring(route) {
  const originalBeforeEnter = route.beforeEnter
  
  route.beforeEnter = async (to, from, next) => {
    const startTime = performance.now()
    
    try {
      if (originalBeforeEnter) {
        await originalBeforeEnter(to, from, next)
      } else {
        next()
      }
    } finally {
      const loadTime = performance.now() - startTime
      
      // 上报性能数据
      if (loadTime > 1000) { // 超过1秒记录慢路由
        console.warn(`Slow route detected: ${to.fullPath} took ${loadTime}ms`)
        analytics.track('SlowRoute', {
          route: to.fullPath,
          loadTime,
          timestamp: Date.now()
        })
      }
    }
  }
  
  return route
}
 
// 应用性能监控
const monitoredRoutes = routes.map(withPerformanceMonitoring)

// 智能预加载实现
class RoutePrefetcher {
  constructor(router, options = {}) {
    this.router = router
    this.options = {
      delay: 1000, // 延迟预加载时间
      threshold: 0.1, // IntersectionObserver阈值
      maxConcurrent: 3, // 最大并发预加载数
      ...options
    }
    this.observer = null
    this.prefetching = new Set()
    this.init()
  }
  
  init() {
    // 监听路由变化，预加载可能的目标路由
    this.router.beforeEach((to, from, next) => {
      this.schedulePrefetch(to)
      next()
    })
    
    // 使用IntersectionObserver预加载可视区域内的链接
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const link = entry.target
          const href = link.getAttribute('href')
          if (href && href.startsWith('/')) {
            this.prefetchRoute(href)
          }
        }
      })
    }, {
      threshold: this.options.threshold
    })
    
    // 观察所有路由链接
    document.addEventListener('DOMContentLoaded', () => {
      const links = document.querySelectorAll('a[href^="/"]')
      links.forEach(link => this.observer.observe(link))
    })
  }
  
  schedulePrefetch(currentRoute) {
    // 获取当前路由的可能下一步路由
    const possibleRoutes = this.getPossibleNextRoutes(currentRoute)
    
    setTimeout(() => {
      possibleRoutes.forEach(route => {
        if (this.prefetching.size < this.options.maxConcurrent) {
          this.prefetchRoute(route.path)
        }
      })
    }, this.options.delay)
  }
  
  async prefetchRoute(path) {
    if (this.prefetching.has(path)) return
    
    try {
      this.prefetching.add(path)
      const matched = this.router.resolve(path).matched
      
      await Promise.all(
        matched.map(record => {
          if (record.components && !record.components._loaded) {
            return Promise.all(
              Object.values(record.components).map(component => {
                if (typeof component === 'function') {
                  return component()
                }
                return component
              })
            )
          }
        })
      )
      
      console.log(`✅ 预加载完成: ${path}`)
    } catch (error) {
      console.warn(`❌ 预加载失败: ${path}`, error)
    } finally {
      this.prefetching.delete(path)
    }
  }
  
  getPossibleNextRoutes(currentRoute) {
    // 基于用户行为分析获取可能的路由
    // 这里可以实现更复杂的算法
    return this.router.getRoutes().filter(route => {
      return route.path !== currentRoute.path && 
             !route.path.includes(':') && // 排除动态路由
             route.meta?.prefetch !== false
    }).slice(0, 5) // 限制预加载数量
  }
}
 
// 使用预加载器
const prefetcher = new RoutePrefetcher(router, {
  delay: 2000,
  maxConcurrent: 2
})