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

2024-01-02 17:36:27

📢?鸿蒙专栏:想学鸿蒙的,冲

📢 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项目开发达到更高的水准。

文章来源:https://blog.csdn.net/qq_41152573/article/details/135339499
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。