Vue router-link 对比a标签

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

官方中给出的解释是这样的： <router> 比起写死的 <a> 会好一些，理由如下：

无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9低版本浏览器也会有好的兼容。

 总结：

相当于是a标签的升级版本 plus版本 对低版本浏览器做了兼容性处理 除了基础功能还加了vue里面的一些增加功能 例如变换标签

router-link本质就是a标签的加强版

//router-link样式改变
 
#nav a {
  font-weight: bold;
  color: black;
  text-decoration: none;
}  
 


.router-link-exact-active {
  color: #42b983  !important;
  text-decoration: none;
}

//例子 变为div
<router-link tag="div">a</router-link>

 

a标签

点击a标签从当前页面跳转到另一个页面
通过a标签跳转，页面就会重新加载，相当于重新打开了一个网页

router-link

通过router-link进行跳转不会跳转到新的页面，不会重新渲染，它会选择路由所指的组件进行渲染

 总结：

 通过a标签和router-link对比，router-link避免了重复渲染，不像a标签一样需要重新渲染，导致一些动态添加路由的机制失效