router-link+tag+a路由失败

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

#vue

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

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
关注
49. VUE router-link 标签的属性讲解 和 不通过router-link 实现路由跳转
Bi-Hu的博客
08-12 1324
1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签 ，那么我们就可以 tag 属性 ，可以自定义渲染成自己想要的组件： 可以发现 a 标签渲染成了 按钮。 2.replace属性 我们发现 你点击了router-link 标签 然后跳转切换视图的时候，他默认保留历史的 即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...
vue-router 中 router-link 与 a 标签的区别
心碎烤肠的博客
04-14 972
vue-router 中 router-link 与 a 标签的区别
vue的＜router-link＞标签未渲染成a标签
weixin_44294359的博客
11-02 2110
今天遇到的一个坑，发现是vue.js的版本问题，凡是v2.6.0到v2.6.8都无法正常使用<router-link>标签，不知道还有没有其他版本不能使用
VUE ROUTER---路由
l_l_l_l_l_l_l_li的博客
07-06 1145
一、认识和安装vue-router vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换 安装vuerouter: npm install vue-router@4 细节：@4代表的是安装vuerouter4最新的版本 二、路由的使用步骤 三、路由的默认路径 四、router-link 通过.router-link-active这个类名可以给router-link这个内置组件样式
声明式导航＜router-link＞：解决a标签自带的默认样式
YY的博客
11-30 4744
声明式导航原理
【bug】router-link没有编译为a标签
qq_44869043的博客
04-17 1682
问题： 原因一：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 1978
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
详谈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>` 则根据当前路由呈现相应的组件。这种基于组件的...
router-link的tag属性以及router-view的复用
A13330069275的博客
07-19 9611
&lt;router-link to="/"  tag="div" class="nav-link"&gt;主页&lt;/router-link&gt;   可用tag改变默认元素       如果 &lt;router-view&gt;设置了名称，则会渲染对应的路由配置中 components 下的相应组件。查看 命名视图 中的例子。    ...
router-link里面文本不显示问题
jsmylo的博客
06-01 1910
一.项目里面在menu菜单栏使用ant-design的menu组件，在标签里面使用图标组件和router-link标签。在router-link里面写文本，不显示。二.看解决前和解决后 里面的插值根本不管用。
Vue学习笔记（八）——router绑定事件不生效的解决方案
讨厌走开啦
04-02 3096
参考文档一：https://cn.vuejs.org/v2/guide/ 参考文档二：https://www.cnblogs.com/minghui007/p/7263177.html 对初学者来说，使用路由后遇到的第一个问题通常是尝试在路由跳转时执行定义的函数，但是发现路由跳转时函数没有执行，类似下面这样的代码： <!DOCTYPE html> <html lang="en"&...
Vue 路由的基本使用
weixin_30247781的博客
07-30 309
<!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 6962
今天看了下 vue router 的文档，自己写了个小 demo，代码如下 <html> <head> <script src="https://unpkg.com/vue/dist/vue.js"></script> <...
vue的router-link和a标签的本质区别
qq_45632139的博客
05-25 4025
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属性不起作用
A444477的博客
02-12 1318
vue3.0 貌似取消了tag
vue-router 2.0 跳转之传参、传递多个参数
Awen_liang1002
10-11 9651
在vue项目中，往往会遇到这样的情况，就是要实现在一文章列表中，点击其中一条跳转到下个页面，然后将这一条的相关数据带到下个页面中显示，无论点哪一条都是跳到相同的页面结构（下一个页面的页面使用的组件是一样的），只是填的数据不一样，这个时候就需要实现跳转的时候一起把参数携带过去。 &lt;template&gt; &lt;div class="template"&gt; &lt;!--...
利用tag解决路由环路和次优路径
qq_43061885的博客
04-01 3742
问题描述： 1、 当R2、R3上做了双向重分发之后，我们可以观察路由表发现到：R2/R3之间产生了一条去往R4环回口的次优路径（如果R2先学习到R4的环回口，会通过OSPF分发给R3，R3上就会出现一条R4环回口下一跳为R2的O路由；R3先学习到同道理） 2、 R2学习到了R4环回口路由，它会将此路由通过路由协议A传递给它的邻居（此图中R1、R3均会收到），假设R3又通过重分发传递给了路由协议B...
Vue中router-link介绍
热门推荐
杨春建的博客
11-06 9万+
原文地址：http://router.vuejs.org/zh-cn/api/router-link.html 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 比起写死的 会好一些，理由如下
Unknown html tag router-link
最新发布
09-03
`Unknown html tag router-link` 错误通常意味着开发环境未能识别 `router-link` 标签，这可能是由于 Vue Router 未正确安装或配置导致。以下是解决该问题的常见方法： ### 1. 确保 Vue Router 已安装 如果你使用的是 Vue 项目，需要确保 Vue Router 已经安装。可以通过以下命令安装： ```bash npm install vue-router # 或者使用 yarn yarn add vue-router ``` ### 2. 正确配置 Vue Router 在项目中正确配置 Vue Router。以下是一个基本的配置示例： ```javascript // main.js 或入口文件 import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App.vue'; // 安装 Vue Router 插件 Vue.use(VueRouter); // 定义路由 const routes = [ { path: '/', component: Home }, // 其他路由配置 ]; // 创建路由实例 const router = new VueRouter({ routes }); // 创建 Vue 实例并挂载路由 new Vue({ router, render: h => h(App) }).$mount('#app'); ``` ### 3. 检查组件中是否正确使用 确保在组件中正确使用 `router-link` 标签。示例如下： ```vue <template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </div> </template> <script> export default { name: 'MyComponent' }; </script> ``` ### 4. 检查语法和拼写 确保 `router-link` 标签的语法和拼写正确。正确的基本用法为： ```vue <router-link to="path" tag="button" replace active-class="active"></router-link> ``` ### 5. 检查 IDE 配置 有时候 IDE 可能无法正确识别 `router-link` 标签。可以尝试重启 IDE 或者安装相关的 Vue 插件来解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值