在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的属性,方法和使用实例,罗列出来的都是比较常用和重要的,还有很多其他属性等着你去挖掘。