router-link标签和a标签的不同

Vue.js中提供路由的vue-router,为了实现页面的不跳转,提供了一个全局注册的组件router-link,通过该组件的to参数进行页面路径的指定,可以实现路由的切换。

但是该标签在history下会被自动的转换为a标签,如下方代码。

    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>

在history模式下其实等价于

<div id="nav">
    <a href="/" class="router-link-active">Home</a> | 
    <a href="/about" class="">About</a>
</div>

也就是说,在基本项目中编写普通的标签是等价的,这是因为在history模式中,Vue.js将会自动的拦截a标签的跳转事件,实现单页面应用。

并不会因为编写了a标签而产生页面的跳转这种情况。

但是官方推荐使用router-link标签进行编写代码,这主要是为了兼容hash模式的路由。当模式为hash时,该段代码会被解析成下方代码。

<div id="nav">
    <a href="#/" class="router-link-exact-active router-link-active">Home</a> | 
    <a href="#/about" class="">About</a>
</div>

链接