＜router-link＞属性详解

最新推荐文章于 2024-08-11 00:13:57 发布

cdgogo

最新推荐文章于 2024-08-11 00:13:57 发布

阅读量2.7w

点赞数 21

分类专栏： vue.js

本文链接：https://blog.csdn.net/cdgogo/article/details/107866489

版权

本文详细介绍了Vue Router组件<router-link>的各项属性，包括to、replace、append、tag、active-class和exact等。to属性用于指定目标路由，replace属性决定是否在历史记录中替换当前记录，append属性则影响路径的拼接方式。此外，tag属性可自定义渲染标签，active-class用于设定激活时的CSS类。同时，文章提到了路由实例的push、go和replace方法及其使用场景，以及路由path的配置注意事项。

摘要由CSDN通过智能技术生成

<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的 <a> 标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名

<router-link>组件的属性有：

to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class

to（必选参数）：类型string/location

表示目标路由的链接，该值可以是一个字符串，也可以是动态绑定的描述目标位置的对象

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>
 
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
 
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">