详谈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中ajax学习笔记4
Oct 16 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
Ionic快速安装教程
Jun 03 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
JS实现简易日历效果
Jan 25 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
python多进程操作实例
2014/11/21 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
深入浅析python定时杀进程
2016/06/06 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
python读取中文txt文本的方法
2018/04/12 Python
PageFactory设计模式基于python实现
2020/04/14 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Python修改DBF文件指定列
2020/12/19 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
企业安全生产承诺书
2014/05/22 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
保护校园环境倡议书
2015/04/28 职场文书
民主生活会主持词
2015/07/01 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
python批量创建变量并赋值操作
2021/06/03 Python
Django+Celery实现定时任务的示例
2021/06/23 Python
php实现自动生成验证码的实例讲解
2021/11/17 PHP