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>