详谈vue中router-link和传统a链接的区别
作者:saberrrrrrrr 发布时间:2024-04-09 10:46:05
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;
},
来源:https://blog.csdn.net/saber04/article/details/96717294
猜你喜欢
- 在Flask中配置日志在Flask应用程序中,可以使用Python的标准logging模块来配置日志记录。以下是一个简单的示例,在其中将日志
- 题目:用 JavaScript 代码实现空位补零,比如 pad(12, 3) => 012实现一:/* 平淡无奇法 */functio
- 目录假想场景基本思路pywinauto方案win32gui方案更一般的方案利用Python进行Excel自动化操作的过程中,尤其是涉及VBA
- 具体方法:首先打开命令提示符;然后执行【mysql -u root -p】命令进入mysql;最后执行如下命令即可:select SUBST
- 向量化与for循环耗时对比深度学习中,可采用向量化替代for循环,优化耗时问题对比例程如下,参考Andrew NG的课程笔记import t
- Python关键字 global与nonlocalglobaldef test(): #1函数内如果没定义x,则x默认为全局变量
- 文件的数据是存放于硬盘上的,因而只存在覆盖、不存在修改这么一说,我们平时看到的修改文件,都是模拟出来的效果,具体的说有两种实现方式。一、方式
- 情境问题小王是一名法务专员,工作中会处理所在公司的侵权事件并向侵权方发送法务函。他会按照【法务函模板.docx】 Word 文件给【封号名单
- 前言我们在日常开发中,经常会遇到一些关于文件的操作,例如,实现查看目录内容的功能。类似Linux下的tree命令。统计目录下指定后缀文件的行
- 源码安装Python第三方库几乎都可以在github或者 pypi上找到源码。源码包格式大概有zip 、 tar.zip、 tar.bz2。
- 学习目的: 掌握文本框的用法 初次接触try…catch…语法 今天内容很轻松,用一个例子,输入年月日,判断输入是否正确 图片如下: 用个
- 一、背景我们日常测试中存在大量重复的造数操作,且流程较长,为了提升测试效率,我们搭建了数据构造平台。平台采用了前端 + 脚本分离的形式,数据
- 摘要在上一篇文章,时间日期处理的入门里面,我们简单介绍了一下载pandas里对时间日期的简单操作。下面将补充一些常用方法。时间日期的比较假设
- 因为他的简单实用和数量庞大的插件,所以我们喜欢和使用jQuery,在jQuery数量庞大的插件中有很大的一部分是关于图片的,所以今天我们就整
- 前言上一篇文章介绍了怎么配置机器人框架,并且实现了一些简单的功能。(发送私聊或者群聊信息、接收上报的事件、简单的自动回复等等)这次为了让QQ
- 一.执行代码yum install xz-devel yum install python-backports-lzmapip3 insta
- return 语句就是讲结果返回到调用的地方,并把程序的控制权一起返回程序运行到所遇到的第一个return即返回(退出def块),不会再运行
- 整理了一些JS的常用方法,包括验证啊,全选反选啊,ajax请求啊之类的,因为就是自己用的,写的都比较简单,就算抛砖引玉吧,喜欢的就拿去,不喜
- 本文实例讲述了MySQL数据库优化之索引实现原理与用法。分享给大家供大家参考,具体如下:索引什么是索引索引用来快速地寻找那些具有特定值的记录
- 目录前言1 异常类型1.1 Python内置异常1.2 requests模块的相关异常1.3 用户自定义异常2. 异常捕获2.1&