区别

  • a标签:<a href="...">

W3C的定义是: <a> 标签定义超链接,用于从一张页面链接到另一张页面。 页面相当于进行了跳转,会重新进行渲染,所以这违背了单页面应用原则

  • router-link:<router-link to="">

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

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

Vue的理念是,利用虚拟DOM的概念和diff算法实现了对页面的"按需更新",
Vue-router很好地继承了这一点,重渲染是我们不希望看到的,因为无论跳转到哪个页面,只需要渲染一次就够了。组件帮助我们实现了这个愿望
反观标签,每次跳转都得重渲染一次,在一个浩大的项目里,这多么可怕!我们的"渲染"做了许多"无用功",而且消耗了大量弥足珍贵的DOM性能!

所以使用router-link跳转更加迅速!感觉是“随风潜入夜,润物细无声”,
通过触发mutations改变state后,页面会重新渲染改变的部分(diff算法),
这时候配合router-link返回到上一级

爬。