router-link属性介绍目录
router-link 是 Vue Router 提供的用于导航的组件,它可以用来创建链接到不同路由的链接。以下是一些常用的 router-link 属性和用法:
to
to: 用于指定导航的目标路由。它可以是一个字符串路径,也可以是一个描述目标位置的对象。例如:
<!-- 字符串路径 -->
<router-link to="/home">Home</router-link>
<!-- 对象描述 -->
<router-link :to="{ path: '/about' }">About</router-link>
tag属性
tag: 用于指定 router-link 渲染为哪种 HTML 标签。默认情况下,它会渲染为 标签。你可以使用 tag 属性将其渲染为其他标签,如 。
router-link总是会被解析成为一个a标签如果不想要它被解析成a标签,而是其他标签的话,可以在router-link标签上添加一个新的属性,叫做tag
<router-link tag="button" to="/home"> </router-link>
这样可以让其解析成为一个button标签
replace属性
replace: 如果设置为 true,点击链接将会替换掉浏览器历史记录中的当前路由记录,而不是添加一个新记录。默认值是 false。
让vue-router启动一个replace模式,只需要给
标签添加一个属性叫做replace
<router-link replace> </router-link>
启动replace模式后,就无法通过浏览器的返回回到项目的上一个路由去了,只能通过点击才可以实现切换
class “router-link-active”
监听router-link 是否被激活,也就是监听它当前是否被点击
我们在开发的过程中,激活的router-link标签总是要与其它的不一样,才能便于了解目前所在的页面对应的路由
激活的router-link标签总是会多出一些class名
router-link-active
<router-link class="router-link-active"> </router-link>
我们可以利用这个class名字,来写路由被激活后它特殊的样式
native修饰符
router-link标签绑定事件无法生效的问题,通过加修饰符native解决
<router-link @click.native='changepath'
class="router-link-active"> </router-link>
active-class属性
active-class: 用于设置链接被视为活动链接时应用的 CSS 类。默认情况下,活动链接会添加类名 “router-link-active”。
router-link被激活时的样式名称,通过active-class来绑定
<router-link to="/" active-class="active">首页</router-link>
exact-active-class
exact-active-class: 用于设置链接在精确匹配活动路由时应用的 CSS 类。默认情况下,精确匹配活动链接会添加类名 “router-link-exact-active”。
<router-link to="/profile" exact-active-class="exact-active">Profile</router-link>
append
append: 如果设置为 true,则链接将会被追加到当前路由路径的末尾,而不是替换掉当前路径。这对于创建嵌套路由链接很有用。默认值是 false。
<router-link to="/user" :append="true">User</router-link>
event
event: 指定触发导航的事件。默认情况下,它是 “click”。你可以将其更改为其他事件,如 “mouseover” 或 “contextmenu”。
<router-link to="/contact" event="mouseover">Contact</router-link>
exact
exact: 如果设置为 true,则只有在链接路径与当前路由精确匹配时,链接才会被视为活动链接。默认值是 false。
<router-link to="/contact" event="mouseover">Contact</router-link>