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.mzph.cn/news/592634.shtml

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

相关文章

YOLOv8改进Shape-IoU损失函数:考虑边界框形状和比例的更准确的指标

💡本篇内容:YOLOv8改进Shape-IoU损失函数:考虑边界框形状和比例的更准确的指标 💡🚀🚀🚀本博客 改进源代码改进 适用于 YOLOv8 按步骤操作运行改进后的代码即可 💡参考论文地址:https://arxiv.org/abs/2312.17663 2023年12月最新发表论文:IoU最新的损失函数的…

【error C2146: 语法错误: 缺少“;”(在标识符“PVOID64”的前面)】

用VS2013编译报错&#xff1a; 有人说既然是找不到PVOID64加个typedef就行了。经过本人的试验发现&#xff0c;的确是vs的include顺序问题&#xff0c;调整include顺序保证dx目录在IncludePath目录的下面即可解决问题。 在vs中&#xff0c;选择工具->选项->项目和解决方…

uni静态资源引入及css图片图标引用规范

1、页面组件引入 单页面中的组件引入需经过导入——注册——使用三个步骤&#xff1b; <template><view><!-- 3.使用组件 --><uni-rate text"1"></uni-rate></view> </template> <script>// 1. 导入组件import un…

DoIP学习笔记系列:(八)车厂一般关于DoIP的相关测试分析

文章目录 1. 前言2. 基本项测试2.1 协议版本默认值2.2 车辆标识请求报文格式2.3 带EID的车辆标识请求报文格式2.4 带VIN的车辆标识请求报文格式2.5 否定响应码0x002.6 否定响应码0x012.7 否定响应码0x022.8 否定响应码0x042.9 路由激活应答码0x002.10 路由激活应答码0x012.11 路…

css如何让滚动条不占用宽度 hover上去会显示滚动条

换个简单点可以复用的思路&#xff0c;既然滚动条一直占用宽度&#xff0c;那么我们把滚动条设置成透明&#xff0c;然后hover上去的时候显示颜色不就可以了吗 .hover-scrollbar {overflow: auto;scrollbar-color: transparent transparent;&::-webkit-scrollbar-thumb {b…

贝叶斯推断:细谈贝叶斯变分和贝叶斯网络

1. 贝叶斯推断 统计推断这件事大家并不陌生&#xff0c;如果有一些采样数据&#xff0c;我们就可以去建立模型&#xff0c;建立模型之后&#xff0c;我们通过对这个模型的分析会得到一些结论&#xff0c;不管我们得到的结论是什么样的结论&#xff0c;我们都可以称之为是某种推…

ElasticSearch 复合查询 Boolean Query

官网文档网址&#xff1a;Boolean query | Elasticsearch Guide [7.17] | Elastic 目录 复合查询 Boolean Query 利用bool查询实现功能 总结 复合查询 Boolean Query 布尔查询是一个或多个查询子句的组合。子查询的组合方式有&#xff1a; must:必须匹配每个子查询&#xf…

webpack 5 loader

webpack 本身不能识别js&#xff0c;json外的资源&#xff0c;所以我们需要借助其他loader来处理对应的文件 CSS Loader&#xff0c;处理css 安装 npm i css-loader style-loader -D css-loader 负责讲css编译成webpack能识别的模块内容style-loader 动态创建<style&g…

用CHAT写一简单的C语言线程池的示例

问CHAT&#xff1a;编写一个简单的C语言线程池的示例 CHAT回复&#xff1a;在C语言中&#xff0c;实现线程池需要手动创建线程和管理任务队列。以下是一个简单的C语言线程池的示例&#xff1a; c #include <pthread.h> #include <stdio.h> #define NUM_THREADS 5 …

【前沿技术】超级稳定的视频卡通画方案

Git clone项目到本地 git clone gitgithub.com:Artiprocher/DiffSynth-Studio.git 基本原理 使用了stable diffusion稳定扩散模型和controlnet来控制图像生成的轮廓&#xff0c;animatediff控制视频帧与帧之间的连续性&#xff0c;最后使用RIFE技术平滑整个生成后的视频。 …

一、HTML5简介

一、简介 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点&#xff0c;HTML 运行在浏览器上&#xff0c;由浏览器来解析。 <!…

GoLang学习之路,对Elasticsearch的使用,一文足以(包括泛型使用思想)(一)

这几天没有更新&#xff0c;其主要的的原因是&#xff0c;在学习对Elasticsearch的使用。Elasticsearch是一个非常强大的数据库索引工具。是一个基于Lucene库的搜索引擎。它提供了一个分布式、支持多租户的全文搜索引擎&#xff0c;具有HTTP Web接口和无模式JSON文档。Elastics…

FFmpeg处理音视频的常用API及一般流程

FFmpeg是一个开源的音视频处理库&#xff0c;提供了丰富的API用于音视频的编解码、转码、过滤、播放等操作。 一、使用FFmpeg API解码涉及到的函数及一般流程如下&#xff1a; 1. av_register_all(): 注册所有的编解码器和格式。 av_register_all(); 2. avformat_open_inpu…

【模拟电路】模拟集成电路之神-NE555

一、集成电路NE555简介 二、功能框图与引脚说明 三、比较器&#xff08;运放&#xff09; 四、反相门&#xff08;非门&#xff09; 五、或非门 六、双稳态触发器 七、NE555的工作原理 集成电路NE555的芯片手册 C5157696 一、集成电路NE555简介 NE555起源于上个世纪70年代&a…

站群服务器对SEO的重要性

站群服务器是专门为一个或者多个网站配置独立IP的一种服务器。如果企业或者用户想要组建多个网站&#xff0c;站群服务器将是必需的。这是因为站群服务器可以提高搜索引擎对多个网站的关注度&#xff0c;从而提高网站文章的收录量和访问量&#xff0c;这同时也是网站SEO优化的重…

Eureka服务注册与发现中心

简介 Spring Cloud封装了Netflix 公司开发的Eureka模块来实现服务治理 在传统的RPC远程调用框架中&#xff0c;管理每个服务与服务之间依赖关系比较复杂&#xff0c;管理比较复杂&#xff0c;所以需要使用服务治理&#xff0c;管理服务于服务之间依赖关系&#xff0c;可以实现…

【Math】重要性采样 Importance sample推导【附带Python实现】

【Math】重要性采样 Importance sample推导【附带Python实现】 文章目录 【Math】重要性采样 Importance sample推导【附带Python实现】1. Why need importance sample?2. Derivation of Discrete Distribution3. Derivation of Continuous Distribution3. An Example 笔者在学…

Cloud模型matlab

学习资料python 多维正态云python 预备知识&#xff1a; 如何获取具有特定均值和方差的正态分布随机数。首先&#xff0c;初始化随机数生成器&#xff0c;以使本示例中的结果具备可重复性。 rng(0,twister);基于均值为 500 且标准差为 5 的正态分布创建包含 1000 个随机值的向…

Linux学习之系统编程3(进程及wait函数)

写在前面&#xff1a; 我的Linux的学习之路非常坎坷。第一次学习Linux是在大一下的开学没多久&#xff0c;结果因为不会安装VMware就无疾而终了&#xff0c;可以说是没开始就失败了。第二次学习Linux是在大一下快放暑假&#xff08;那个时候刚刚过完考试周&#xff09;&#xf…