详谈vue中router-link和传统a链接的区别


Posted in Javascript onJuly 22, 2020

Vue-router是伴随着Vue框架出现的路由系统,它也是公认的一种优秀的路由解决方案。在使用Vue-router时候,我们常常会使用其自带的路径跳转组件Link,通过实现跳转,这和传统的何其相似!但它们到底有什么具体的区别呢?

官方中给出的解释是这样的:

<router-link> 比起写死的 <a href="..." rel="external nofollow" rel="external nofollow" > 会好一些,理由如下:

无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。

在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。

当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写 (基路径) 了。

呃呃,只能说博主刚学时第一次并没有看懂(应该是之前的基础知识不牢固吧,看来之后得补补啦),于是去自行查阅啦:

<a href="..." rel="external nofollow" rel="external nofollow" >

W3C中是这样解释a标签的:

<a> 标签定义超链接,用于从一张页面链接到另一张页面。

从一张页面跳转到另一张页面,但从这里来说就违背了多视图的单页Web应用这个概念

通过a标签进行跳转,页面会被重新渲染,即相当于重新打开一个新的网页,体现为视觉上的“闪烁”(如果是本地的项目基本看不出来)

router-link

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生成别的标签.。

通过router-link进行跳转不会跳转到新的页面,也不会重新渲染,它会选择路由所指的组件进行渲染,避免了重复渲染的“无用功”。

总结:对比<a>,router-link组件避免了不必要的重渲染,它只更新变化的部分从而减少DOM性能消耗

Vue的创新之处在于,它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新",

Vue-router很好地继承了这一点,重渲染是我们不希望看到的,因为无论跳转到哪个页面,只需要渲染一次就够了。<Link>组件帮助我们实现了这个愿望

反观<a>标签,每次跳转都得重渲染一次,在一个浩大的项目里,这多么可怕!我们的"渲染"做了许多"无用功",而且消耗了大量弥足珍贵的DOM性能!

补充知识:使用vue中路由router-link中包含a标签

当vue中使用router-link包含a标签的时候,a标签会取代routerlink的值实现跳转,

<div class="list" v-for="(item,index) in listName" @click="toDetail(item.id)">
<p>{{item.name}}</p>
<p>{{item.address}}</p>
<p>{{item.distance}}米</p>
<a :href="getUrl(item.tel)" rel="external nofollow" rel="external nofollow" >图标{{item.tel}}</a>
</div>
<!--<router-link :to="{path:'detail',query:{id:item.id}}" tag="div" class="list" v-for="(item,index) in listName" @click="toDetail()">
<p>{{item.name}}</p>
<p>{{item.address}}</p>
<p>{{item.distance}}米</p>
<a :href="getUrl(item.tel)" rel="external nofollow" rel="external nofollow" >图标{{item.tel}}</a>
</router-link>-->

下面这个routerlink中a标签会替代router-link的使用

可以使用div加点击事件

2 当在vue中实现 a href="tel:1325425652" rel="external nofollow" 的时候,直接使用:href="tel" rel="external nofollow" +变量的方法不可以,

可以使用函数封装

getUrl(tel){
return "tel:"+tel;

},

以上这篇详谈vue中router-link和传统a链接的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 #Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 #Javascript
vue页面跳转实现页面缓存操作
Jul 22 #Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 #Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 #Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 #Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 #Javascript
You might like
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
jQuery 表格工具集
2010/04/25 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
动态创建类实例代码
2009/10/07 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
DBA的职责都有哪些
2012/05/16 面试题
自荐信包含哪些内容
2013/10/30 职场文书
开办饭店创业计划书
2013/12/28 职场文书
总裁助理岗位职责
2014/02/17 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
校园安全广播稿范文
2014/09/25 职场文书
学生逃课检讨书
2015/02/17 职场文书
永不妥协观后感
2015/06/10 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS