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

在vue.js框架快速入门简明教程(八)：路由中我们讨论过了vue路由的作用和用法，其中vue路由需要使用 router-link 组件来导航，那么router-link包含哪些属性呢？这些属性又有什么作用呢？文本再结合详细说明和例子让我们再来深入了解一router-link的各种属性。
一、to属性在vue路由中，to 表示目标路由的链接。当被点击后，内部会立刻把to的值传到router-push()，值可以是一个字符串或者是描述目标位置的对象。进行路径的跳转。< router-link> 默认会被渲染成一个 `< a> ` 标签，to相当于a标签中的” herf” 属性，后面跟跳转链接所用，被渲染成：

< a href="http://www.srcmini.com/#foo1">< /a>

【vue中router-link属性的解析和用法】上述代码等同于:

< 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-classexact-active-class和active-class相类似，不同的是，exact-active-class是配置当链接被精确匹配的时候应该激活的 class。不设置的时候，默认的class：router-link-exact-active
六、eventevent属性是声明可以用来触发导航的事件，event的值可以是一个数组或者一个字符串。
用法：