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

文章目录

前言

a标签定义

router-link定义

总结

前言

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

a标签定义

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

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

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

router-link定义

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

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

总结

　　对比<a>，router-link 组件避免了不必要的重渲染，它只更新变化的部分从而减少DOM性能消耗。

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