1. Vue Router基础配置入门
第一次接触Vue Router时，我盯着那一堆配置项直发懵。后来才发现，其实核心配置就那几个关键属性，理解了它们就能应付大部分场景。先来看个最简单的路由配置示例：
import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import('../views/About.vue') } ] const router = createRouter({ history: createWebHistory(), routes }) export default router这个配置里藏着几个新手容易忽略的细节：
createWebHistory()会生成干净的URL（比如/about），但需要服务器配合做回退路由处理。如果不想配置服务器，可以用createWebHashHistory()，URL会带#（比如/#/about）- About组件用了动态导入（
() => import()），这样打包时会自动做代码分割，首屏加载更快 - 每个路由的
name属性不是必须的，但在编程式导航时会特别有用
我在实际项目中最常遇到的坑是：忘记在main.js中挂载路由。即使配置再完美，少了这步也是白搭：
import { createApp } from 'vue' import App from './App.vue' import router from './router' // 确保导入路由配置 const app = createApp(App) app.use(router) // 关键步骤！ app.mount('#app')2. 核心属性深度解析
2.1 path配置的隐藏技巧
path不只是简单的字符串匹配，它支持高级匹配模式。比如我们有个用户详情页：
{ path: '/user/:id', component: UserDetail }这个:id会被自动解析为路由参数，在组件中可以通过route.params.id获取。但更实用的是这些进阶用法：
- 可选参数：
/user/:id? - 多段参数：
/user/:id/post/:postId - 正则约束：
path: '/user/:id(\\d+)'（只匹配数字ID） - 通配符：
path: '/user/*'会匹配所有/user/开头的路径
我曾在电商项目中用这样的配置处理复杂的产品分类路由：
{ path: '/category/:main/:sub?/:detail?', component: CategoryPage }2.2 meta属性的实战应用
meta是我最喜欢的路由属性，它就像个随身记事本，可以给路由附加各种元信息。最常见的几种用法：
{ path: '/admin', component: AdminPage, meta: { requiresAuth: true, // 需要登录 title: '管理后台', // 页面标题 keepAlive: true // 需要缓存 } }在路由守卫中就可以这样使用：
router.beforeEach((to) => { if (to.meta.requiresAuth && !isLoggedIn) { return '/login' } document.title = to.meta.title || '默认标题' })最近做的后台系统还用它存菜单图标和权限标识：
meta: { icon: 'el-icon-user', permissions: ['user:manage'] }3. 动态路由高级玩法
3.1 路由懒加载优化
当你的应用越来越大，把所有组件打包到一个文件会让首屏加载变慢。Vue Router的懒加载有几种写法：
// 1. 标准写法 component: () => import('./views/HeavyComponent.vue') // 2. 添加webpack魔法注释（给chunk命名） component: () => import(/* webpackChunkName: "heavy" */ './views/HeavyComponent.vue') // 3. 分组打包（把相关路由打到同一个chunk） component: () => import(/* webpackChunkName: "group-user" */ './UserDetails.vue')实测下来，配合预加载效果更好。可以在主页面加载完成后预加载其他路由：
// 在首页组件中 onMounted(() => { import('./views/About.vue') // 预加载about页面 })3.2 动态添加路由
后台管理系统经常需要根据用户权限动态注册路由。这样做：
// 获取用户权限后 const dynamicRoutes = [ { path: '/admin', component: AdminPanel } // 其他权限路由... ] dynamicRoutes.forEach(route => { router.addRoute(route) })有个坑要注意：动态添加的路由在导航守卫中可能还没生效，可以用router.hasRoute()检查。
4. 导航守卫与高级控制
4.1 全局守卫的典型场景
最常用的全局前置守卫：
router.beforeEach(async (to, from) => { // 1. 登录验证 if (to.meta.requiresAuth && !store.state.user) { return { path: '/login', query: { redirect: to.fullPath } } } // 2. 权限校验 if (to.meta.permissions) { const hasPermission = await checkPermissions(to.meta.permissions) if (!hasPermission) return '/403' } // 3. 页面标题设置 if (to.meta.title) { document.title = `${to.meta.title} - 我的站点` } })全局后置守卫适合做埋点统计：
router.afterEach((to) => { trackPageView(to.fullPath) })4.2 路由独享守卫
有些校验只需要在特定路由执行：
{ path: '/edit/:id', component: EditPage, beforeEnter: (to) => { if (!isValidId(to.params.id)) { return '/404' } } }4.3 组件内守卫
在组件内可以直接使用这些守卫：
onBeforeRouteEnter((to, from) => { // 还不能访问this（组件未创建） }) onBeforeRouteUpdate(async (to) => { // 路由参数变化但组件复用时 this.userData = await fetchUser(to.params.id) }) onBeforeRouteLeave((to) => { if (this.formChanged) { return confirm('确定要离开吗？未保存的修改会丢失') } })5. 嵌套路由与命名视图
5.1 多层级嵌套路由
后台管理系统常用这种布局：
{ path: '/dashboard', component: DashboardLayout, children: [ { path: '', // 默认子路由 component: DashboardHome }, { path: 'settings', component: DashboardSettings } ] }对应的模板要这样写：
<!-- DashboardLayout.vue --> <div> <Sidebar/> <div class="content"> <router-view/> <!-- 子路由出口 --> </div> </div>5.2 命名视图实现复杂布局
有些页面需要同时显示多个路由组件：
{ path: '/', components: { default: Home, // 主内容区 sidebar: Sidebar, // 侧边栏 footer: AppFooter // 页脚 } }模板中要对应多个router-view：
<router-view></router-view> <router-view name="sidebar"></router-view> <router-view name="footer"></router-view>6. 路由传参的几种方式
6.1 通过params传参
// 路由配置 { path: '/user/:id', component: User } // 导航方式 router.push('/user/123') // 或 router.push({ name: 'User', params: { id: 123 } })在组件中通过route.params.id获取。注意：使用params时如果用path跳转会失效，必须用name。
6.2 通过query传参
适合传递可选参数：
// 生成URL：/search?q=vue router.push({ path: '/search', query: { q: 'vue' } }) // 组件内获取 route.query.q // => 'vue'6.3 通过props解耦
更优雅的方式是在路由配置中开启props：
{ path: '/user/:id', component: User, props: true // 将params自动转为props }这样组件就可以直接接收props：
defineProps({ id: String })对于复杂场景，props还可以是函数：
props: route => ({ id: route.params.id, query: route.query })7. 路由过渡与滚动行为
7.1 页面切换动画
最简单的过渡效果：
<router-view v-slot="{ Component }"> <transition name="fade" mode="out-in"> <component :is="Component" /> </transition> </router-view>对应的CSS：
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; } .fade-enter-from, .fade-leave-to { opacity: 0; }7.2 自定义滚动行为
让页面在导航后滚动到特定位置：
const router = createRouter({ scrollBehavior(to) { if (to.hash) { return { el: to.hash, behavior: 'smooth' } } return { top: 0 } } })8. 常见问题解决方案
8.1 处理404页面
两种实现方式：
// 方法1：捕获所有路由 { path: '/:pathMatch(.*)*', component: NotFound } // 方法2：动态导入提高性能 { path: '/:pathMatch(.*)*', component: () => import('@/views/NotFound.vue') }8.2 路由重复点击报错
在路由push时捕获错误：
router.push('/path').catch(err => { if (err.name !== 'NavigationDuplicated') { console.error(err) } })或者直接扩展Router原型：
const originalPush = router.push router.push = function push(location) { return originalPush.call(this, location).catch(err => err) }8.3 保持页面状态
用keep-alive缓存路由组件：
<router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" /> </keep-alive> </router-view>更精细的控制可以结合路由meta：
<keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive" />
