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>

如图:

vue路由to属性实例-01

二、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>
vue路由tag属性实例-02

四、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>
vue路由active-calss属性实例-03

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

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?