Vue Router 是 Vue.js 生态中用于实现单页面应用（SPA）路由的核心库，它通过动态加载组件和管理 URL 地址来提升用户体验。以下是关键知识点梳理：

1. 基础概念入门 📚

  • 路由映射：将 URL 路径与组件组件关联，例如：
    const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
  • 嵌套路由：通过 children 属性实现子路径管理，例如：
    { path: '/user', component: User, children: [ { path: 'profile', component: Profile } ] }
  • 动态路由：使用 :param 捕获动态参数，如 /user/:id 可匹配 /user/123 或 /user/456

2. 常用功能详解 🔧

  • 编程式导航：通过 this.$router.push() 实现跳转 
    this.$router.push({ path: '/login' })
  • 路由守卫：beforeEach、beforeResolve、afterEach 控制页面跳转逻辑
  • 滚动行为：scrollBehavior 实现路由切换时的滚动还原功能

3. 实践技巧 ✅

  • 使用 <router-link> 创建带样式的导航链接
  • 通过 v-slot 访问路由元信息（meta）
  • 配合 vue-router 的 mode: 'history' 实现 URL 友好化

扩展阅读 📚

如需深入了解 Vue Router 的高级用法，可参考 Vue Router 高级路由指南。

vue_js_logo
routing_architecture