router-link+tag+a路由失败

最新推荐文章于 2024-04-14 16:28:02 发布
原创 最新推荐文章于 2024-04-14 16:28:02 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文探讨了在使用Vue.js的router-link组件时遇到的一个特殊场景：当router-link的tag属性被设置为li，并且内部包含了一个a标签时，点击li标签无法触发路由跳转。文章详细解释了这一现象的原因，并给出了实际的渲染效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

router-link失效场景

<router-link to="/home/xxxxxx/" tag="li">
	<a href="javascript:">点我</a>
</router-link>

这种情况下点击li标签区域，不会路由，URL地址也没有改变。反而点击<a>标签能正确路由。

原因

router-link通过tag改变渲染后的标签，同时里面包裹了一个<a>标签的情况。会将里面的<a>作为真实的链接，其href属性是真正的路由地址。
实际渲染的效果：

<li>
	<a href="#/home/xxxxxx/">点我</a>
</li>

参考文档

风凉ZZ
关注
router-link里面文本不显示问题
jsmylo的博客
06-01 1891
一.项目里面在menu菜单栏使用ant-design的menu组件，在标签里面使用图标组件和router-link标签。在router-link里面写文本，不显示。二.看解决前和解决后 里面的插值根本不管用。
49. VUE router-link 标签的属性讲解 和 不通过router-link 实现路由跳转
Bi-Hu的博客
08-12 1280
1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签 ，那么我们就可以 tag 属性 ，可以自定义渲染成自己想要的组件： 可以发现 a 标签渲染成了 按钮。 2.replace属性 我们发现 你点击了router-link 标签 然后跳转切换视图的时候，他默认保留历史的 即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...
vue的＜router-link＞标签未渲染成a标签
weixin_44294359的博客
11-02 2096
今天遇到的一个坑，发现是vue.js的版本问题，凡是v2.6.0到v2.6.8都无法正常使用<router-link>标签，不知道还有没有其他版本不能使用
【bug】router-link没有编译为a标签
qq_44869043的博客
04-17 1648
问题： 原因一：use 顺序错误 引入vue-router后，在注册的时候顺序错了，要先use，再 mount()，要先使用再挂载。否则挂载上去后，再使用，就不会编译了。 解决方法： 将 use 方法用在 mount 挂载前: 原因二： vue-router 依赖文件有问题 解决方法： 重新 npm install vue-router@xxx ， xxx 为 vue-router 的版本 原因三：main.js（入口文件） 没有引入 vue-router 解决方法： 找到入口文件，import V
router-link标签
远方不远
09-30 1955
router-link标签 在vue1.0版本中的仍然用a标签来实现链接跳转功能，但链接地址与html中不同，它是采用v-link属性来控制。但是在2.0版本中a标签就被替换成了rount-link属性，但是最终在页面上显示还是会被渲染成a标签。接下来将要详细的介绍该属性中的各个值的用法 router-link属性值详解 （1）":to" 属性值 这个属性值就相当于a标签中的"herf"属性，后面的内容为跳转链接的内容 ```<router-link :to="http://www.gxl
router-link的tag属性以及router-view的复用
A13330069275的博客
07-19 9576
&lt;router-link to="/"  tag="div" class="nav-link"&gt;主页&lt;/router-link&gt;   可用tag改变默认元素       如果 &lt;router-view&gt;设置了名称，则会渲染对应的路由配置中 components 下的相应组件。查看 命名视图 中的例子。    ...
详谈vue中router-link和传统a链接的区别
10-15
例如，你可能希望创建一个按钮来触发路由跳转，这时`<router-link tag="button">` 就派上用场了。 在性能方面，`<router-link>` 仅更新变化的部分，避免了整个页面的重渲染，这得益于Vue的虚拟DOM和diff算法，能够...
【JavaScript源代码】Vue router-view和router-link的实现原理.docx
12-29
总结起来，Vue Router 的 `<router-link>` 和 `<router-view>` 组件共同实现了SPA中的动态路由导航。`<router-link>` 负责创建可点击的导航链接，而 `<router-view>` 则根据当前路由呈现相应的组件。这种基于组件的...
vue-router 中 router-link 与 a 标签的区别
最新发布
心碎烤肠的博客
04-14 902
vue-router 中 router-link 与 a 标签的区别
Vue学习笔记（八）——router绑定事件不生效的解决方案
讨厌走开啦
04-02 3063
参考文档一：https://cn.vuejs.org/v2/guide/ 参考文档二：https://www.cnblogs.com/minghui007/p/7263177.html 对初学者来说，使用路由后遇到的第一个问题通常是尝试在路由跳转时执行定义的函数，但是发现路由跳转时函数没有执行，类似下面这样的代码： <!DOCTYPE html> <html lang="en"&...
VUE ROUTER---路由
l_l_l_l_l_l_l_li的博客
07-06 1101
一、认识和安装vue-router vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换 安装vuerouter: npm install vue-router@4 细节：@4代表的是安装vuerouter4最新的版本 二、路由的使用步骤 三、路由的默认路径 四、router-link 通过.router-link-active这个类名可以给router-link这个内置组件样式
Vue 路由的基本使用
weixin_30247781的博客
07-30 291
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
vue router 中 router-link 不起作用的问题
chunyanquan1444的博客
02-27 6942
今天看了下 vue router 的文档，自己写了个小 demo，代码如下 <html> <head> <script src="https://unpkg.com/vue/dist/vue.js"></script> <...
vue的router-link和a标签的本质区别
qq_45632139的博客
05-25 4003
a标签和router-link a标签 <a href="">链接 </a> router-link <router-link to=""></router-link> a标签 点击a标签从当前页面跳转到另一个页面 通过a标签跳转，页面就会重新加载，相当于重新打开了一个网页 router-link 通过router-link进行跳转不会跳转到新的页面，不会重新渲染，它会选择路由所指的组件进行渲染 总结 通过a标签和router-link对比，router-
vue问题：router-link中的tag没有生效
weixin_44222717的博客
02-27 3590
原因：没有将router挂载 解决方法： 在main.js中加入以下代码 import router from './router/index' new Vue({ router }).$mount('#app')
常见报错，分析其原因
qq_47443027的博客
03-20 1804
1、- tag <div> has no matching end tag. ：<div>没有匹配的结束标记。 2、Unknown custom element: <RecruModel> - did you register the component correctly? ：未知的自定义元素：<recorumodel>-是否正确注册了组件？，自定义的组件，用了可你注册了吗 3、Invalid handler for event "edit": ..
tag ＜MyPag＞ has no matching end tag
m0_55666986的博客
05-27 2557
报错提示很明显： 标签没有结束标签，也就是没有给标签加闭合
【Vue项目练习】router-link跳转失败原因
xptxhx的博客
11-10 3800
发现自己使用router-link想要传到/detail路径的时候需要带个params参数 总是自动跳转到我项目的首页
＜div＞ has no matching end tag.
热门推荐
<WRM>的博客
08-02 2万+
出现这个错误的原因主要是：div元素之间的对应关系出错，比如多写了一个div元素，却没有与之对应的</div>；再就是末尾的</div>没写/
router-link组件的tag属性
06-09
`router-link` 组件是 Vue Router 中提供的组件，用于生成链接，它的 `tag` 属性用于指定 `router-link` 渲染为哪种标签。 默认情况下，`router-link` 组件会渲染为 `<a>` 标签，但是有些情况下，我们可能需要将其渲染为其他标签，比如 `<button>`。这时候就可以使用 `tag` 属性来指定要渲染的标签。 例如，如果要将 `router-link` 渲染为一个按钮，可以这样写： ```html <router-link tag="button" to="/foo">Go to Foo</router-link> ``` 这样 `router-link` 就会被渲染为一个按钮，点击它会触发路由跳转到 `/foo` 页面。 除了 `<a>` 和 `<button>` 标签，`router-link` 还可以渲染成其他标签，比如 `<li>`、`<div>` 等。根据需要选择合适的标签即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值