vue保姆级教程----深入了解 Vue Router的工作原理

📢 鸿蒙专栏：想学鸿蒙的，冲

📢 C语言专栏：想学C语言的，冲

📢 VUE专栏：想学VUE的，冲这里

📢 CSS专栏：想学CSS的，冲这里

📢 Krpano专栏：想学VUE的，冲这里

🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！

目录

✨ 前言

✨ vue-router详解

vue-router的组成部分

前端路由的两种模式

导航解析流程

路由信息对象

✨ 结语

---

✨ 前言

        Vue Router是Vue.js的官方路由管理器,它与Vue.js核心深度集成,可以很好地帮助我们构建单页面应用。那么它是如何工作的呢?本文将带你深入了解vue-router的工作原理。

✨ vue-router详解

vue-router的组成部分

• Route:路由对象,包含路径、组件等路由信息。

  const routes = [
    {
      path: '/user/:id',
      component: User,
      alias: '/usr', 
      meta: { requiresAuth: true }
    }
  ]

• Router:路由器对象,包含路由映射表和监听路由改变。

  const router = new VueRouter({
    routes // 路由映射表
  })
  
  // 监听路由改变事件
  router.beforeEach((to, from, next) => {
    // ...
  })

• Router-view:根据当前路由渲染匹配的组件,是一个Outlet。

  <router-view></router-view>

• Router-link:路由连接,绑定到对应路由的锚点标签。

  <router-link to="/user/123">User</router-link>

• 导航守卫(Navigation Guards)：可在路由导航发生时进行访问控制。

导航守卫的类型

• 全局守卫:router.beforeEach,监听每一个路由导航。
• 路由独享守卫:beforeEnter在路由配置中定义。
• 组件内守卫:beforeRouteEnter,在激活组件前调用。

钩子的参数

• to:目标路由对象
• from:当前导航要离开的路由
• next:调用该方法来resolve这个钩子

next方法的处理

• next():进行管道中的下一个钩子。
• next(false):中断当前导航。
• next('/path'):跳转到一个不同的地址。
• next(error):传入一个Error实例作为参数,导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

应用场景

• 权限控制:检查用户权限 then决定允许进入路由或退回登录页。
• 数据预取:在进入路由前预先获取数据。
• 异步导航:路由导航成功之前展示“加载中”。

所以导航守卫可以对路由进行更多控制,是vue-router强大的功能之一。

router.beforeEach((to, from, next) => {
  // ...
  next() 
})

前端路由的两种模式

vue-router支持两种路由模式:

• hash: hash模式利用 URL 的 hash 实现路由。比如 http://example.com/#/user 。

优点是兼容性好,无须服务器配置。但 URL 不够优雅,有 #,不符合 REST 风格。

实现:监听 hashchange 事件,根据 hash 更新组件。

window.addEventListener('hashchange', () => {
  // 根据 hash 读取组件
})

• history:history 模式通过 history API 改变 URL,如 http://example.com/user。

优点是 URL 优雅,没有 # 。但需要服务端支持,解析 URL 并重定向。

实现:通过 history.pushState() 改变 URL,监听 popstate 事件。

总结:

• hash 模式兼容性好,但 URL 不够优雅。
• history 模式 URL 优雅,但需要服务端配合解析。
• Vue Router 默认支持两种模式,可以根据需求选择。

导航解析流程

1. 初始化路由器,注册路由表规则。
2. Router-link组件或代码导航触发路由change。
3. Router匹配当前URL,解析出目标路由记录。
4. Router确认转移路由后,更新视图和URL。
5. 组件根据路由参数准备数据,Router-view呈现组件。

路由信息对象

每个路由都会映射一个组件,同时可以有额外的元信息:

✨ 结语

        vue-router通过管理路由与组件的动态映射,实现了单页面应用的不同页面之间的切换。路由器监听 URL 变化,映射匹配的路由配置,然后渲染目标组件。各种路由钩子也让我们可以更好地控制路由导航。

        总而言之,vue-router为Vue单页面应用提供了便捷的客户端路由管理,使得页面模块化和开发更加高效。它与Vue深度集成,使构建复杂的单页面应用变得简单自然。正确理解和灵活运用其工作原理,可以使我们的Vue项目开发达到更高的水准。