Vue Router 4.0 正式发布!焕然一新。

关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习

12月8日,Vue Router 4 正式发布稳定版本。

在经历了 14 个 Alpha,13 个 Beta 和 6 个 RC 版本之后,Vue Router v4 闪亮登场,为你带来了 TypeScript 集成、新功能以及对现代应用程序的一致性改进,已经准备好成为 Vue3 新应用的最佳伴侣。

将近 2 年的时间,大约 1500 次提交,15 个RFC[1],无数的心血……以及许多用户的帮助以及他们的错误报告和功能请求。 谢谢大家的帮助!

项目结构优化

Vue Router 现在分为三个模块:

  • History 实现: 处理地址栏,并且特定于 Vue Router 运行的环境(节点,浏览器,移动设备等)

  • Router 匹配器:处理类似 /users/:id 的路由解析和优先级处理。

  • Router: 将一切连接在一起,并处理路由特定功能,例如导航守卫。

动态路由

动态路由[2]是 Vue Router 最受欢迎的功能之一。 它让路由变得更灵活,更强大,让曾经不可能的功能成为了现实!Vue Router4 新增了有自动优先级排名的高级路径解析功能,用户新现在可以以随意的顺序定义路由,因为 Router 会根据 URL 字符串表示来猜测应该匹配的路由。

优先级排名,其实就是根据你路径书写的规则计算出一个得分,根据得分来优先选用最有可能的那一项。

举个例子来说,你同时写了 /users 和 /:w+ 这两个路由:

const routes = [{path: '/users',Component: Users},{path: '/:w+',Component: NotFound}
]

那么你当然希望在输入 /users 这个更精确的路径的时候,走上面的规则,而下面则作为兜底规则。在旧版的 Vue Router 中需要通过路由声明的顺序来保证这个行为,而新版则无论你怎样放置,都会按照得分系统来计算该匹配哪个路由。

甚至专门有 Path Ranker[3] 这个网页来帮助你计算路由的优先级得分。

在测试用例中,ssh 找到了一个更具体的优先级得分排名,可以先感受一下:

it('works', () => {checkPathOrder(['/a/b/c','/a/b','/a/:b/c','/a/:b','/a','/a-:b-:c','/a-:b','/a-:w(.*)','/:a-:b-:c','/:a-:b','/:a-:b(.*)','/:a/-:b','/:a/:b','/:w','/:w+'])
})

简单来说,越明确的路由排名越高,越模糊则反之,无关顺序,非常有意思。

改进后的导航系统

新的导航系统更加具有一致性,它改善了滚动行为的体验,使其更加接近原生浏览器的行为。 它还为用户提供了有关导航状态的几乎更多信息,用户可以用这些信息,通过 ProgressBar和 Modal之类的全局 UI 元素让用户的体验变得更好。

更强大的 Devtools

多亏了新的Vue Devtools[4],Vue Router 能够和浏览器进行以下更高级的整合。

  1. 时间轴记录路由变化:

  1. 完整 route 目录,能够帮助你轻松进行调试:

更好的路由守卫

next说拜拜,现在确认跳转不需要再手动执行这个函数了,而是根据你的返回值来决定行为。同样支持异步返回 Promise。

现在的路由守卫 API 更加友好且合理了,可以完美利用 async await 做异步处理,比如这样:

router.beforeEach(async (to, from) => {// canUserAccess() returns `true` or `false`return await canUserAccess(to)
})

一致的编码

编码方式(Encoding)做了统一的适配,现在将在不同的浏览器和路由位置属性(paramsquery 和 hash)中保持一致。 作为参数传递给 router.push() 时,不需要做任何编码,在你使用 $route 或 useRoute()去拿到参数的时候永远是解码(Decoded)的状态。

迁移成本低

Vue Router 4 主要致力于于在改善现有 Router 的同时保持非常相似的 API,如果你已经很上手旧版的 Vue Router 了,那你的迁移会做的很顺利,可以查看文档中的完整迁移指南[5]

展望未来

在过去的几个月中,Vue Router 一直稳定而且好用,现在它可以做些更好玩的事儿了:

  • 使用现有工具(Vetur,Vite,Devtools 等)得到更好的开发体验。

  • 与 Suspense 等现代功能更好地集成。

  • RFCs 和社区共同探讨出更好用的 API。

  • 开发更轻型的版本。

试试看

等不及想试试 Vue Router 4 了?这里有CodeSandbox[6],还有集成好 Tailwind CSS 的 Vite 模板[7],或使用CLI[8]来开始你的游玩。

想学习 Vue Router 4 的更多先进理念了?请立刻查看我们的新文档[9]。 如果您是现有的 Vue 2.x 用户,请直接转到迁移指南[10]

发布地址:https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0

参考资料

[1]

RFC:https://github.com/vuejs/rfcs/pulls?q=is%3Apr+sort%3Aupdated-desc+label%3Arouter+is%3Aclosed

[2]

动态路由:https://next.router.vuejs.org/guide/advanced/dynamic-routing.html

[3]

Path Ranker:https://paths.esm.dev/?p=AAMeJVyBwRkJTALagIAOuGrgACU.#

[4]

Vue Devtools:https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

[5]

完整迁移指南:https://next.router.vuejs.org/guide/migration/index.html

[6]

CodeSandbox:https://codesandbox.io/s/vue-router-4-reproduction-hb9lh

[7]

集成好 Tailwind CSS 的 Vite 模板:https://vite-tailwind.esm.dev/about

[8]

CLI:https://cli.vuejs.org/

[9]

新文档:https://next.router.vuejs.org/

[10]

迁移指南:https://next.router.vuejs.org/guide/migration/index.html#breaking-changes

相关阅读

深入揭秘前端路由本质,手写 mini-router

推荐阅读

知乎问答:一年内的前端看不懂前端框架源码怎么办?
我在阿里招前端,我该怎么帮你?(文末有福利)
如何拿下阿里巴巴 P6 的前端 Offer
如何准备阿里P6/P7前端面试--项目经历准备篇
大厂面试官常问的亮点,该如何做出?
如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?

末尾

你好,我是若川,江湖人称菜如若川,历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)

  1. 关注若川视野,回复"pdf" 领取优质前端书籍pdf,回复"加群",可加群长期交流学习

  2. 我的博客地址:https://lxchuan12.gitee.io 欢迎收藏

  3. 觉得文章不错,可以点个在看呀^_^另外欢迎留言交流~

小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮,欢迎点击阅读,也可以星标我的公众号,便于查找

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

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

相关文章

实战Nginx与PHP(FastCGI)的安装、配置与优化

转载链接:http://ixdba.blog.51cto.com/2895551/806622 一、什么是 FastCGI FastCGI是一个可伸缩地、高速地在HTTP server和动态脚本语言间通信的接口。多数流行的HTTP server都支持FastCGI,包括Apache、Nginx和lighttpd等,同时,…

10个前端8个用Vue的,怎么才能在面试中出彩?

大家好,我是若川。现在但凡出去面试,面试官几乎必问 Vue3.0 。不仅会问一些核心特性,还会问原理层面的问题。比如:▶框架层面问题:Vue3.0 新特性 Composition API 与 React.js 中 Hooks 的异同点?▶源码、原…

故乡 | 登高望远,夜幕降临

欢迎星标我的公众号若川视野,回复加群,长期交流学习上周末看了几集豆瓣评分8.5分刘同同名小说的青春剧《我在未来等你》,让我回想起自己的高中生活。也想起小时候经常爬到故乡附近的小山,看夕阳西下。时常和同事开玩笑说&#xff…

CentOS5安装Nginx1.4+PHP5.5 FastCGI

转载链接:http://blog.csdn.net/staricqxyz/article/details/17012329 yum -y install gcc gcc-c autoconf libjpeg libjpeg-devel libpng libpng-devel freetype freetype-devel libxml2 libxml2-devel zlib zlib-devel glibc glibc-devel glib2 glib2-devel bzip2…

一份热乎乎的滴滴前端面经

关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习滴滴前端实习面经滴滴是我投简历之后第二家面试的公司, 国庆节前两三天投的简历, 国庆后复工第一天就给我打了电话约一面。那时候…

用webBrowser取源文件取不到的点击数--选秀榜selectop.com网站内容管理系统之六

用idhttp可以取到源文件,但网站用脚本代码,源文件是看不到,并且代码的结果也取不出。webBrowser可以多次返回下载到的内容,不包括任何html语法,这个当中就有文章的点击数。在WebBrowser1DownloadComplete事件中处理&am…

真诚推荐几个最值得关注的前端公众号

前端技术日新月异,发展迅速,作为一个与时俱进的前端工程师,需要不断的学习。这里强烈推荐几个前端开发工程师必备的优质公众号,希望对你有所帮助。大家可以像我一样,利用碎片时间阅读这些公众号的文章。code秘密花园一…

Silverlight Unit Test Framework

微软在08年的时候推出了一个Silverlight的单元测试框架,该框架在Mix 08的时候与Silverlight controls同时推出的,微软工程师Jeff Wilcox一直参与维护该单元测试框架。Scott Gu对这个框架的介绍Jeff Wilcox提供的视频介绍该框架的源代码已经包括在Silverl…

Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解

转载链接:http://freeloda.blog.51cto.com/2033581/1288553 大纲 一、前言 二、环境准备 三、安装与配置Nginx 四、Nginx之反向代理 五、Nginx之负载均衡 六、Nginx之页面缓存 七、Nginx之URL重写 八、Nginx之读写分离 注,操作系统为 CentOS 6.4 x86_64…

能在任意一种框架中复用的组件,太牛了!

Web Component 是一种 W3C标准支持的组件化方案,通过它可以编写可复用的组件,同时也可以对自己的组件做更精细化的控制。更牛的是,Web Component 可以在任何一种框架中使用,不用加载任何模块、代码量小,优势非常明显&a…

stm32cubemx中文_用 STM32 通用定时器做微秒延时函数(STM32CubeMX版本)

概述​ 在使用 DHT11 的时候,时序通信需要微秒来操作,STM32CubeMX 自带一个系统时钟,但是实现的是毫秒级别的。因此就自己用通用计时器实现一个。文章目录环境:开发板:STM32F4探索者(正点原子)1…

人脸识别拷勤门禁主板_捷易讲解AI无感人脸识别考勤门禁终端设备在使用中的维护方法...

人脸识别考勤门禁终端设备虽然在出厂时,都有做密封处理,但面对细小的灰尘,并没有做到百分百防尘。灰尘对于AI无感人脸识别考勤门禁终端设备是有一定的影响的,他会沉淀在主板上、屏幕上,影响设备散热和正常工作&#xf…

【翻译】How-To: Using the N* Stack, part 3

原文地址:http://jasondentler.com/blog/2009/08/how-to-using-the-n-stack-part-3/ Java – 一种代码松散的XML 在我们学习 Fluent NHibernate 之前, 应该先了解下老式的 NHibernate 映射文件应该是怎样写的。 在一个典型的 NHibernate 配置中,你会有很…

你可能需要的网易前端三轮面经

关注若川视野, 回复"pdf" 领取资料,回复"加群",可加群长期交流前言最近一个星期面了几家公司,最后收获了心仪的网易有道offer,于是推掉了其他的面试,至于一些其他大厂,并没有投简历&am…

复习.net/c#时的小文章之万年草稿版 (全是基础概念,请懂的人绕行)

必读文:61条面向对象设计的经验原则(体会篇) C#知识点集合 (面试必备)一、显式(explicit)转换和隐式(implicit)转换的一般概念int i 100; Response.Write(i); // 这就是隐式 Response.Write(i.ToString()); // 这就是显式 一般来讲&#xff…

timertask run函数未执行_图执行模式下的 TensorFlow 2

文 / 李锡涵,Google Developers Expert本文节选自《简单粗暴 TensorFlow 2.0》尽管 TensorFlow 2 建议以即时执行模式(Eager Execution)作为主要执行模式,然而,图执行模式(Graph Execution)作为 TensorFlow 2 之前的主要执行模式&#xff0c…

如何从 0 到 1 打造团队 PC/H5 构建工具

关注若川视野, 回复"pdf" 领取资料,回复"加群",可加群长期交流学习一、前言 大家好,我叫鳗鱼,这次分享的主题是如何从 0 到 1 打造适合自己的构建部署方案。image.png先例行的自我介绍,大概 14 年…

testng接口自动化测试_Java+Maven+TestNG接口(API)自动化测试教程(10) 使用 Jenkins 构建自动化测试持续集成...

现在代码可以运行了,但是每次运行都需要我们手工去执行,并且测试报告也只能在执行测试的电脑上才能看到,我们希望能够定时自动执行测试,并且能够做到自动发送测试报告到相关人员的电子邮箱中。Jenkins 正好可以很好的完成以上诉求…

论公众号内卷

关注若川视野, 回复"pdf" 领取资料,回复"加群",可加群长期交流学习曾几何时公众号文章的标题单纯且没有套路七年前的我就是这样仅仅把公众号当做一个写文章的博客平台甚至是像有道云一样的在线笔记平台当时的标题是这样子滴《hashma…

程序异常异常代码: 0xc0000005_Java基础:看完这篇你还怕碰到异常吗?

前言在日常的开发以及平时的学习练习中,异常相信对于大家来讲并不陌生,但是对于异常的具体使用、底层实现以及分类等等可能并不是很了解。今天我就抽出了一点时间系统的整理了异常的各个知识点,希望能够帮助到大家对于Java 异常的理解与学习。…