Vue 标签router-link 作用、用法

目录

作用

基本用法

---

作用

router-link 是 Vue.js 中 Vue Router 的一部分，也就是说你必须要使用Vue Router 才能用使router-link ，router-link其实就是相当于html中<a>，也就是超链接作用。

基本用法

以下是几个主要用法：

to：指定要导航到的路由路径或路由对象。

<router-link to="/path">Go to Path</router-link>

如果你在 Vue Router 中定义了命名路由，可以这样使用：

<router-link :to="{ name: 'route-name' }">Go to Named Route</router-link>

如果路由定义了参数，你可以这样传递它们：

<router-link :to="{ name: 'route-name', params: { userId: 123 }}">Go to User</router-link>

router-link 默认渲染为 <a> 标签，但你可以通过 tag 属性更改它的标签类型,将其置换成按钮：

<router-link to="/path" tag="button">Go to Path</router-link>

当 router-link 匹配当前路由时，它将自动设置一个活动类（默认为 .router-link-active）。你可以通过 active-class 属性自定义这个类名：

<router-link to="/path" active-class="active-link">Go to Path</router-link>

你还可以绑定常规的 Vue 事件：

<router-link to="/path" @click="handleClick">Go to Path</router-link>

------------------------------------------与正文内容无关------------------------------------
如果觉的文章写对各位读者老爷们有帮助的话，麻烦点赞加关注呗！作者在这拜谢了!

如果你需要Java 、Python毕设、网页和系统设计，还有你是刚入职的新手需要度过试用期。联系方式微信：Romanticl99 网名：A乐神