vue-router 中 router-link 与 a 标签的区别

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1. 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" >

2. a 标签：

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

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

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

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

router-link:

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

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

总结：

　　对比<a>，router-link 组件避免了不必要的重渲染，它只更新变化的部分从而减少DOM性能消耗。Vue的创新之处在于，它利用虚拟 DOM 的概念和 diff 算法实现了对页面的"按需更新"，Vue-router很好地继承了这一点，重渲染是我们不希望看到的，因为无论跳转到哪个页面，只需要渲染一次就够了。反观<a>标签，每次跳转都得重渲染一次。

补充：

使用vue中路由router-link中包含a标签：

1. 当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 中 router-link 与 a 标签的区别 的全部内容， 来源链接： utcz.com/z/379562.html

回到顶部