🌟 为什么选择Vue Router？

+ 与Vue深度集成，支持组合式API
+ 动态路由匹配与嵌套路由
+ 导航守卫实现完整权限控制
+ 支持HTML5 History与Hash模式
+ 官方维护，生态工具丰富

⚡ 5分钟快速配置

1. 创建带路由的Vue项目

npm create vue@latest
✔ Add Vue Router? Yes

2. 手动安装配置

// main.js
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('@/views/Home.vue') },
    { path: '/about', component: () => import('@/views/About.vue') }
  ]
})

createApp(App).use(router).mount('#app')

💡 核心概念解析

1. 路由配置规范

// router/index.js
const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: UserProfile,
    props: true,
    meta: { requiresAuth: true },
    children: [
      { path: 'posts', component: UserPosts }
    ]
  }
]

2. 组合式API用法

<script setup>
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

function navigate() {
  router.push({
    name: 'user',
    params: { id: 123 },
    query: { tab: 'profile' }
  })
}
</script>

🔥 六大实战场景

场景1：动态路由权限

// 全局前置守卫
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return { name: 'login' }
  }
})

场景2：路由过渡动画

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

场景3：滚动行为控制

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else if (to.hash) {
      return { el: to.hash }
    } else {
      return { top: 0 }
    }
  }
})

🛠️ 高级开发技巧

1. 路由元信息管理

// 路由配置
{
  path: '/dashboard',
  meta: {
    breadcrumb: '控制面板',
    permission: ['admin']
  }
}

// 在组件中访问
const route = useRoute()
console.log(route.meta.breadcrumb)

2. 动态添加路由

// 添加新路由
const newRoutes = [
  {
    path: '/dynamic',
    component: () => import('@/views/Dynamic.vue')
  }
]
newRoutes.forEach(route => router.addRoute(route))

// 重置路由
router.removeRoute('route-name')

3. 路由懒加载优化

// 使用webpack魔法注释
component: () => import(/* webpackChunkName: "group-user" */ './User.vue')

// Vite配置自动代码分割
{
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          user: ['@/views/UserProfile.vue']
        }
      }
    }
  }
}

🚀 性能优化策略

⚠️ 常见问题指南

1. 重复导航警告

// 统一处理Promise rejections
router.push('/path').catch(() => {})

2. 路由组件刷新

// 使用watch监听路由变化
watch(
  () => route.params.id,
  newId => {
    fetchData(newId)
  }
)

3. 路由模式选择

+ createWebHistory: 需要服务器配置支持
+ createWebHashHistory: 兼容性好
- 避免混用两种历史模式

+ 官方文档：https://router.vuejs.org
+ 推荐工具：Vue Router Tab
- 注意：避免在路由守卫中进行长时间同步操作