好资源导航 » 文章资讯 » 详谈vue中router-link和传统a链接的区别

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

2023-07-20 01:44:04 61

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

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

比起写死的会好一些，理由如下：

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

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

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

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

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

标签定义超链接，用于从一张页面链接到另一张页面。

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

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

router-link

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

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

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

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

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


{{item.name}}
{{item.address}}
{{item.distance}}米
图标{{item.tel}}

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

可以使用div加点击事件

2当在vue中实现ahref="tel:1325425652"rel="externalnofollow"的时候，直接使用：href="tel"rel="externalnofollow"+变量的方法不可以，

可以使用函数封装

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

},

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