vue中router-link属性的解析和用法

在vue.js框架快速入门简明教程(八)：路由中我们讨论过了vue路由的作用和用法，其中vue路由需要使用 router-link 组件来导航，那么router-link包含哪些属性呢？这些属性又有什么作用呢？文本再结合详细说明和例子让我们再来深入了解一router-link的各种属性。

一、to属性

在vue路由中，to 表示目标路由的链接。当被点击后，内部会立刻把to的值传到router-push()，值可以是一个字符串或者是描述目标位置的对象。进行路径的跳转。<router-link> 默认会被渲染成一个 `<a>` 标签，to相当于a标签中的”herf”属性，后面跟跳转链接所用，被渲染成：

<a href="#foo1"></a>

上述代码等同于:

<router-link :to="{path: 'foo1'}" >路由1</router-link>

如图：

二、replace属性

在javascript语法中，replace() 方法用于在字符串中用一些字符替换另一些字符，是替换方法。而在vue中会不会有什么不同呢。在vue中，设置这个属性其实也是替换的作用，会调用 router.replace() 而不是 router.push()，作用是导航后不会留下 history 记录。

用法：

<router-link to="/foo1" replace>路由1</router-link>

三、tag

我们知道，<router-link>会被渲染成a标签，但是要想被渲染成其他标签，有没有办法呢？Tag是标签的意思，设置了tag属性，router-link会被渲染成相应的标签，同样它还是会监听点击的功能。

例如：

<router-link to="/foo1" tag='li'>路由1</router-link>

四、active-class

设置active-class属性是当router-link中的链接被激活是，添加css类名。也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性。如果没有设置active-class属性，vue会有一个默认的class来表示当前链接被激活：router-link-active。

<router-link active-class='active_class' :to="{path: 'foo1'}" >路由1</router-link>

五、exact-active-class

exact-active-class和active-class相类似，不同的是，exact-active-class是配置当链接被精确匹配的时候应该激活的 class。不设置的时候，默认的class：router-link-exact-active

六、event

event属性是声明可以用来触发导航的事件，event的值可以是一个数组或者一个字符串。

用法：

<router-link to="/foo2" event='mouseover'>点击2</router-link>

添加属性后把鼠标放上去不用点击都会发生跳转哦。

以上是学习router-link的属性，方法和使用实例，罗列出来的都是比较常用和重要的，还有很多其他属性等着你去挖掘。