Vue router-link

<router-link>组件支持用户在具有路由功能的应用中（点击导航）。通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

---

<router-link>对比<a>的好处：

• 无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
• 在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
• 当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。

---

如何将激活的class应用在外层元素，而不是a标签，将原生a标签嵌套在router-link内

<router-link tag="li"  to="/home">
<a>/home</a>
</router-link>

---

router-link 属性

属性名	是否为必需	类型	默认值	作用
to	必须	string或者 目标位置对象		表示目标路由的链接
replace		Boolean	false	当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
append		Boolean	false	在当前 (相对) 路径前添加基路径
tag		string	"a"	重定义标签类型，并监听点击，触发导航
active-class		string	"router-link-active"	设置 链接激活时使用的 CSS 类名
exact		Boolean	false	取消全包含匹配，只匹配当前设置路径
event		string或array<string>	"click"	生命可以用来触发导航的事件
exact-active-class		string	"router-link-exact-active"	配置当链接被精确匹配的时候应该激活的 class

补充以及代码示例：
to
当被点击后，内部会立刻把 to 的值传到 router.push()

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

<router-link :to="{path:'/home'}" replace></router-link>

append
例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class
控制当前路由点击时的样式

 new VueRouter({
    ...
    linkActiveClass: 'is-active'
});
//css
.is-active{
  background:red;
}

exact
举个例子，如果当前的路径是 /a 开头的，那么 <router-link to="/a"> 也会被设置 CSS 类名。

<!-- 这个链接只会在地址为 / 的时候被激活 -->
<router-link to="/" exact>