详谈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 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
JavaScript 原型与原型链详情
Nov 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
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
PHP链表操作简单示例
2016/10/15 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python通过shutil实现快速文件复制的方法
2015/03/14 Python
详解Python中的正则表达式的用法
2015/04/09 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
python3.8下载及安装步骤详解
2020/01/15 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
中英双版中文教师求职信
2013/10/27 职场文书
中专生自我鉴定
2013/12/17 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
家长通知书家长评语
2014/04/17 职场文书
秦兵马俑导游词
2015/02/02 职场文书
学校捐书活动总结
2015/05/08 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
阿里云日志过滤器配置日志服务
2022/04/09 Servers