路由定义与导航
- 动态路由匹配:参数传递(
/user/:id
) - 嵌套路由配置与
<router-view>
层级渲染 - 编程式导航:
router.push
、router.replace
和router.go
路由守卫与权限控制
- 全局守卫:
beforeEach
、beforeResolve
、afterEach
- 路由独享守卫:
beforeEnter
- 组件内守卫:
onBeforeRouteUpdate
、onBeforeRouteLeave
路由懒加载与性能优化
- 动态导入组件:
() => import('./views/User.vue')
- 路由分包策略与预加载
组合式 API 集成
useRouter
和useRoute
的使用场景- 在
setup()
中访问路由参数和查询字符串
高级路由模式
- 路由元信息(
meta
字段)与面包屑导航 - 过渡动效与滚动行为控制
- 动态路由添加/删除(应用场景如后台权限系统)