Vue-router
是伴随着Vue
框架出现的路由系统,它也是公认的一种优秀的路由解决方案。在使用Vue-router
时候,我们常常会使用其自带的路径跳转组件Link
,通过实现跳转。
vue 官方解释:
<router-link>
比起写死的 <a href="...">
会好一些,理由:
- 无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
- 在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。
- 当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写 (基路径) 了。
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
性能!