vue-router到底有什么用？（解惑篇）

有了v-if和组件化，为什么还要在 Vue 项目中使用 Vue Router？

最近有一个实习生师弟问了我这样的问题：为什么要在 Vue 项目中使用 Vue Router？，引发了我的一些思考，作为前端老鸟，用vue router已经成为了一种习惯，但是我们有没有想过为什么需要用它？花了半小时，我写下了这篇文章，一是解答，二是分享。

在 Vue 项目中，虽然可以通过手动控制组件的显示和隐藏来实现页面切换（例如使用 v-if 或 v-show），但使用 Vue Router 仍然有很多重要的优势和必要性。以下是 Vue Router 的主要作用及其与手动切换组件的对比：

---

1. URL 与页面状态的同步

• 手动切换组件 ：
  • 组件的切换不会改变浏览器的 URL。
  • 用户无法通过 URL 直接访问某个页面，也无法通过浏览器的前进/后退按钮导航。
• Vue Router ：
  • 每个页面（组件）都有唯一的 URL，用户可以通过 URL 直接访问特定页面。
  • 支持浏览器的前进/后退按钮，提供更好的用户体验。
  • 页面状态与 URL 同步，便于分享和书签保存。

---

2. 路由参数和动态路由

• 手动切换组件 ：
  • 如果需要根据参数动态加载内容（例如 /user/1 和 /user/2 显示不同用户的信息），需要手动解析参数并更新组件状态。
• Vue Router ：
  • 支持动态路由（如 /user/:id），可以轻松实现根据 URL 参数动态加载内容。
  • 通过 this.$route.params 或 useRoute()（Composition API）可以方便地获取路由参数。

---

3. 路由嵌套和布局

• 手动切换组件 ：
  • 实现嵌套路由或复杂布局（例如侧边栏 + 内容区域）需要手动管理组件的嵌套和显示逻辑。
• Vue Router ：
  • 支持嵌套路由，可以轻松实现复杂的页面布局。
  • 通过 <router-view> 嵌套，可以在不同层级显示不同的组件。

---

4. 路由守卫

• 手动切换组件 ：
  • 实现页面权限控制或路由跳转前的逻辑（例如登录验证）需要手动编写逻辑。
• Vue Router ：
  • 提供全局路由守卫（beforeEach、beforeResolve、afterEach）和组件级守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave），方便实现权限控制、数据预加载等功能。

---

5. 懒加载

• 手动切换组件 ：
  • 所有组件会在初始化时一次性加载，可能导致首屏加载时间过长。
• Vue Router ：

  • 支持路由懒加载，可以按需加载组件，优化首屏加载性能。

  • 示例：

    const User = () => import('./views/User.vue');

---

6. SEO 友好

• 手动切换组件 ：
  • 由于 URL 不会变化，搜索引擎无法正确索引页面内容，不利于 SEO。
• Vue Router ：
  • 每个页面有唯一的 URL，便于搜索引擎抓取和索引。
  • 结合服务端渲染（SSR）或静态站点生成（SSG），可以进一步提升 SEO 效果。

---

7. 代码组织和可维护性

• 手动切换组件 ：
  • 页面切换逻辑与组件耦合，代码难以维护和扩展。
• Vue Router ：

  • 将路由配置集中管理，代码结构清晰，便于维护和扩展。

  • 示例：

    const routes = [
      { path: '/', component: Home },
      { path: '/about', component: About },
      { path: '/user/:id', component: User },
    ];

---

8. 路由跳转和编程式导航

• 手动切换组件 ：
  • 需要手动管理组件的显示和隐藏逻辑，跳转逻辑复杂。
• Vue Router ：

  • 提供 this.$router.push、this.$router.replace 等方法，方便实现编程式导航。

  • 示例：

    this.$router.push('/about'); // 跳转到关于页面
    this.$router.replace('/user/1'); // 替换当前路由

---

9. 路由动画

• 手动切换组件 ：
  • 实现页面切换动画需要手动编写逻辑。
• Vue Router ：

  • 结合 <transition> 组件，可以轻松实现路由切换动画。

  • 示例：

    <transition name="fade">
      <router-view></router-view>
    </transition>

---

10. 与 Vue 生态的集成

• 手动切换组件 ：
  • 无法充分利用 Vue 生态中的路由相关工具和插件。
• Vue Router ：
  • 与 Vue Devtools 集成，方便调试路由状态。
  • 支持与 Vuex 等状态管理工具结合，实现更复杂的状态管理。

---

总结

对于直接用vue上手前端项目的开发者，vue router作为官方推荐的路由方案，自然而然就用到项目里了。而经历过前后端不分离时代、原生html+jquery时代的开发者，显然更能明白路由这一功能对前端项目是怎样的如虎添翼，也更能理解使用vue router的必要性和优势所在。

虽然手动切换组件可以实现简单的页面切换功能，但 Vue Router 提供了更强大、更灵活的路由管理能力，能够更好地满足现代 Web 应用的需求。以下是 Vue Router 的核心优势：

1. URL 与页面状态同步。
2. 支持动态路由和嵌套路由。
3. 提供路由守卫和懒加载功能。
4. 优化 SEO 和性能。
5. 提升代码组织和可维护性。