router-link与a差别

下面是两种方式编译后的代码，除了元素的文本不一样外，在关键信息href都是一样的。

// 源码
<a href="#/message">demo1</a>
<router-link to="message">demo2</router-link>

// 渲染为
<a href="#/message" data-v-spiderid="6e3c3fce@5">demo1</a>
<a href="#/message" class="" data-v-spiderid="6e3c3fce@6">demo2</a>

router-link的to到底有何作用

表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

对应源码

// vue-router/src/components/link.js
// line 82
if (this.tag === 'a') {
  data.on = on
   data.attrs = { href }
}

// line 62
const handler = e => {
  if (guardEvent(e)) {
    if (this.replace) {
      router.replace(location)
    } else {
      router.push(location)
    }
  }
}

const on = { click: guardEvent }
if (Array.isArray(this.event)) {
  this.event.forEach(e => { on[e] = handler })
} else {
  on[this.event] = handler
}

• 什么时候使用router-link更好？ router统一管理；跳转前置拦截，比如是否登录和权限判断