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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/315609.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

集合高级知识点

集合高级 1. HashSet 底层原理 HashSet 的特点&#xff1a; HashSet 实现了 Set 接口HashSet 底层实质上是 HashMap可以存放 null 值&#xff0c;但是只能有一个 nullHashSet 不保证元素是有序的&#xff0c;取决于 hash 后&#xff0c;再确定索引的结果&#xff0c;即不保证…

webRTC实时通信demo

参考文档&#xff1a; https://www.jianshu.com/p/f439ce5cc0be https://www.w3cschool.cn/socket demo流程示意图&#xff08;用户A向用户B推送视频&#xff09;&#xff1a; #mermaid-svg-0KZaDQ5DBl28zjmZ {font-family:"trebuchet ms",verdana,arial,sans-seri…

C++ STL set用法详解

我们都知道&#xff0c;set是STL里的一种数据结构&#xff0c;这篇博客就是set用法的详解。 1.set的创建。 set初始化一般是 set<数据结构名称> 名字; 具体例子&#xff1a; 创建一个int型&#xff0c;名称是s的set。 set<int> s; set还可以创建STL里的数据…

深入剖析ShardingSphere:探索其内核原理与核心源码,揭秘分库分表技术的奥秘

一、 内核剖析 ShardingSphere虽然有多个产品&#xff0c;但是他们的数据分片主要流程是完全一致的。 解析引擎 解析过程分为词法解析和语法解析。 词法解析器用于将SQL 拆解为不可再分的原 子符号&#xff0c;称为Token。 并根据不同数据库方言所提供的字典&#xff0c;将其…

Linux操作系统极速入门[常用指令]

linux概述&#xff1a; Linux是一套免费使用和自由传播的操作系统 我们为什么要学&#xff0c;Linux&#xff1f; 主流操作系统&#xff1a; linux系统版本&#xff1a; 内核版&#xff1a; 由linux核心团队开发&#xff0c;维护 免费&#xff0c;开源 负责控制硬件 发行版&…

瑞典最大的连锁超市Coop再遭勒索软件团伙攻击

近日&#xff0c;仙人掌勒索软件团伙声称已经黑入了瑞典最大的连锁超市Coop&#xff0c;并威胁要公开大量个人信息&#xff0c;超过2万个目录。 据了解&#xff0c;Coop在瑞典大约有800家商店&#xff0c;这些商店分属于29个消费者协会&#xff0c;拥有350万个会员&#xff0c…

drf知识-09

自定义频率类 # throttling 频率限制 # 简单方案 from rest_framework.throttling import SimpleRateThrottle class CommonThrottle(SimpleRateThrottle):rate 3/mdef get_cache_key(self, request, view):ip request.META.get(REMOTE_ADDR)return ip# 复杂方案---》通用方案…

灰度发布及声明式资源管理(yaml文件)

一、三种常见的项目发布方式 1&#xff09;蓝绿发布 2&#xff09;灰度发布【常用】 3&#xff09;滚动发布 应用程序升级&#xff0c;面临最大的问题是新旧业务之间的切换 立项-定稿-需求发布-开发-测试-发布&#xff0c;测试上线后&#xff0c;再完美也会有问题&#xff0c;为…

计算机组成原理-期末复习

第一章——计算机系统概述 一、数字计算机的主要组成结构 在电子计算机里&#xff0c;相当于算盘功能的部件&#xff0c;我们称之为运算器&#xff1b;相当于纸那样具有“记忆’功能的部件&#xff0c;我们称之为存储器&#xff1b;相当于笔那样把原始解题信息送到计算机或把…

关于简单的数据可视化

1. 安装数据可视化必要的openpyxl、pandas&#xff0c;matplotlib等软件包 使用清华源&#xff0c;命令如下&#xff1a; pip install -i https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua.edu.cn pandaspip install -i https://pypi.tuna.tsingh…

2024,全网最全的接口测试工具之postman

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

机器学习基本概念及模型简单代码(自用)

监督学习 监督学习是机器学习的一种方法&#xff0c;其中我们教导模型如何做出预测或决策&#xff0c;通过使用包含输入和对应输出的已标注数据集进行训练。这种方法的关键特点是利用这些标注数据**&#xff08;即带有正确答案的数据&#xff09;**来指导模型的学习过程。 一言…