vue-router到底有什么用?(解惑篇)

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

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

在 Vue 项目中,虽然可以通过手动控制组件的显示和隐藏来实现页面切换(例如使用 v-ifv-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.paramsuseRoute()(Composition API)可以方便地获取路由参数。

3. 路由嵌套和布局

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

4. 路由守卫

  • 手动切换组件
    • 实现页面权限控制或路由跳转前的逻辑(例如登录验证)需要手动编写逻辑。
  • Vue Router
    • 提供全局路由守卫(beforeEachbeforeResolveafterEach)和组件级守卫(beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave),方便实现权限控制、数据预加载等功能。

5. 懒加载

  • 手动切换组件
    • 所有组件会在初始化时一次性加载,可能导致首屏加载时间过长。
  • Vue Router
    • 支持路由懒加载,可以按需加载组件,优化首屏加载性能。

    • 示例:

      javascript 复制代码
      const User = () => import('./views/User.vue');

6. SEO 友好

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

7. 代码组织和可维护性

  • 手动切换组件
    • 页面切换逻辑与组件耦合,代码难以维护和扩展。
  • Vue Router
    • 将路由配置集中管理,代码结构清晰,便于维护和扩展。

    • 示例:

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

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

  • 手动切换组件
    • 需要手动管理组件的显示和隐藏逻辑,跳转逻辑复杂。
  • Vue Router
    • 提供 this.$router.pushthis.$router.replace 等方法,方便实现编程式导航。

    • 示例:

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

9. 路由动画

  • 手动切换组件
    • 实现页面切换动画需要手动编写逻辑。
  • Vue Router
    • 结合 <transition> 组件,可以轻松实现路由切换动画。

    • 示例:

      vue 复制代码
      <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. 提升代码组织和可维护性
相关推荐
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴8509 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
JSON_L12 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊12 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选13 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
Britney⁺♛&?ꪶꪫꪜꫀ16 小时前
Vue2上
vue.js·npm
江城开朗的豌豆16 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
海天胜景19 小时前
vue3 el-table 列数据合计
前端·javascript·vue.js