把router-link标签渲染成指定的标签

最新推荐文章于 2024-05-21 19:03:31 发布

转载最新推荐文章于 2024-05-21 19:03:31 发布 · 613 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luguankun/p/10635229.html

<router-link>标签可通过tag属性自定义渲染为任意HTML标签，例如将其设置为li元素并内嵌span来展示链接文本。

<router-link>标签默认渲染成 <a>标签，可以通过tag属性把router-link渲染成指定的标签，如：

<router-link to="/" tag="li"><span>home</span></router-link>

转载于:https://www.cnblogs.com/luguankun/p/10635229.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CGGAO

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

49. VUE router-link 标签的属性讲解和不通过router-link 实现路由跳转

Bi-Hu的博客

08-12

1294

1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签，那么我们就可以 tag 属性，可以自定义渲染成自己想要的组件：可以发现 a 标签渲染成了按钮。 2.replace属性我们发现你点击了router-link 标签然后跳转切换视图的时候，他默认保留历史的即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...

vue-router 中 router-link 与 a 标签的区别

心碎烤肠的博客

04-14

910

vue-router 中 router-link 与 a 标签的区别

参与评论您还未登录，请先登录后发表或查看评论

vue-router中如何让'router-link'渲染成指定的标签？

duansamve的博客

05-19

5294

大家都知道vue-router中<router-link> 默认会被渲染成一个 `<a>` 标签： <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"&g...

修改router-link标签的渲染成其他标签

qq_44255146的博客

04-21

550

修改router-link标签的渲染成其他标签 //tag:设置要渲染成的标签 //replace:浏览器不能返回前进到这个 //to点击之后要跳转到的路由 <router-link tag='div' replace to='/div'></router-link>

router-link的属性

weixin_45736311的博客

06-30

347

1. to属性：用于指定跳转的路径 <router-link to="/shouye">首页</router-link> 2. tag属性：可指定<router-link>之后渲染成什么组件，都行比如想将它渲染成<button>标签(渲染之后依然具有a标签的属性) <router-link to="/shouye" ta="button" >首页</router-link> 3. replace属性：可让浏览器左上方的那两个箭头

【vue】使用router-link代替a标签实现高亮

最新发布

m0_73956614的博客

05-21

304

to="/my" 可以匹配 /my /my/a /my/b ....router-link解析出来就是a标签。将a标签换成router-link。可实现多层高亮，所以一般用的多。刚开始长的类名就修改为短的了。少了exact就是模糊匹配。模糊匹配 (用的多)

vue系列 <router-link>属性

我是一言

06-22

700

<router-link>属性 <router-link>这里用到了一个to属性，并且把它渲染成<a>标签，他还有其他属性： tag tag可以指定<router-link>之后渲染成什么组件, 比如要渲染成button <router-link to="/home" tag="button">首页</router-link&...

详谈vue中router-link和传统a链接的区别

10-15

`<router-link>` 还允许自定义渲染标签，通过`tag`属性，你可以将其渲染为任意HTML元素，而不仅仅是`<a>` 标签。例如，你可能希望创建一个按钮来触发路由跳转，这时`<router-link tag="button">` 就派上用场了。在...

详解vue中router-link标签所必备了解的属性

10-17

4. tag属性：此属性允许开发者将router-link渲染成不同的标签。比如默认情况下router-link被渲染为a标签，但通过tag属性指定为其他标签如span、li等。这样可以满足不同的HTML结构需求。 5. active-class属性：用于...

spyke-react-hook-router-link:从React Router的Link逻辑中提取的React钩子，可以更轻松地与第三方UI库集成

05-28

@ spyke / react-hook-router-link 从react-router的逻辑中摘录的内容，可以更轻松地与第三方UI库集成。如果您使用的是UI库并希望呈现链接，则一开始您可能会提出以下建议：这种方法的问题可能是，您将失去...

＜router-link＞

LH2HA3的博客

06-29

2078

基本用法

把router-link改成指定的标签

周家大小姐

10-25

1990

把router-link 改成div <router-link tag="div">sdfsdfadsfsdf</router-link>

router-link 改变当前被选择目标颜色

omg的博客

03-04

9894

router-link 改变当前被选择目标颜色由于vue采用新的连接方式router-link，其默认渲染成a标签，我原先使用 &amp;amp; &amp;gt; router-link display: block font-size: 14px color: rgb(77, 85, 93) &amp;amp;.active ...

vue中的router-link导航栏刷新，选中样式不修改

何婷的博客

04-08

1732

<router-link v-for="(item,index) in listed" :key=“item.value” :to="{path:item.path,query:{item:index}}" :class="{‘router-link-exact-active’:ind == index}" @click.native=“changeBgc(index)” class=“to...

vue的＜router-link＞标签未渲染成a标签

weixin_44294359的博客

11-02

2102

今天遇到的一个坑，发现是vue.js的版本问题，凡是v2.6.0到v2.6.8都无法正常使用<router-link>标签，不知道还有没有其他版本不能使用

router-link渲染到了ul下的li的a标签上

Honey的博客

05-28

288

解决router-link渲染到a标签上的问题（1）问题：（2）解决方法： tag 改变渲染标签 <ul class="nav"> <li v-for="(item, index) in navlist1" :key="index" > <router-link tag="div" :to="item.link" exact>{{ item.name }}</router-link> </l

router-link标签

11-04

它会被渲染成一个a标签，但是可以通过设置tag属性来渲染成其他标签，如li、div等。同时，router-link还可以通过设置active-class属性来自定义激活状态下的样式类名，从而实现去除下划线等效果。