router-link设置为不能点击

最新推荐文章于 2024-07-05 09:04:11 发布
最新推荐文章于 2024-07-05 09:04:11 发布
阅读量1w 收藏
点赞数
分类专栏： vue.js 文章标签： router-link vue disabled push router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32340877/article/details/79848755
版权

有个时候我们需要选中数据才能跳转页面就得把router-link设置为不能点击

解决办法 直接给按钮button设置个属性 disabled 给个事件比如

 xx() {
       this.$router.push({ path: '/Add-Portal' })
     },

其他

关于传参

router.push({ name: 'user', params: { userId: 123 }})

这样的话你就可以在this.$route对象中拿到传递的params值了

《源码好优多》
关注
专栏目录
vue中router-link标签所必备了解属性
weixin_41224029的博客
04-10 3484
to 表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。 <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home">Home</a...
router-link会阻止click事件
MCY的博客
08-22 4067
router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。 而a标签不会阻止。 因为router-link的作用是单纯的路由跳转啊，如果不阻止事件的话，会有很多坑吧。你可以试试在router-link绑定其他事件看看，都不会触发的。除非加了native 意思就是当你给一个vue组件绑定事件时候，要加上native！如果是普通的html元素！就不需...
Vue 路由的使用及解决 router-link 点击事件无效问题
最新发布
My_wife_QBL的博客
07-05 697
在routes: [path: '/',},});Vue Router 是 Vue.js 官方的路由管理器，它提供了丰富的功能来构建单页面应用。通过定义路由、创建路由实例、挂载路由实例以及在模板中使用和，我们可以轻松实现页面导航和视图切换。在上添加点击事件时，可以使用.native修饰符监听原生点击事件，或者使用@click监听点击事件并调用阻止默认行为，然后手动执行路由跳转。希望本文能够帮助你全面理解 Vue Router 的使用方法，并解决在上添加点击事件无效的问题。
官方的js路由router
weixin_40945354的博客
02-09 1085
// 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 // 我们后面再讨论嵌套路由。 const routes = [ { path: '/', component: HelloWorld }, { pa
Vue.js——router-link阻止click事件
weixin_30315905的博客
06-07 1039
router-link只能单纯做路由跳转 https://segmentfault.com/q/1010000007896386 转载于:https://www.cnblogs.com/wuqiuxue/p/9148705.html
Vue ＜router-link＞标签绑定@click点击事件失败
JZevin的博客
04-16 5518
失败原因 router-link标签本身会阻止click事件，使用常规的@click绑定点击事件自然会失败。 解决方案 @click之后添加native修饰符。 <router-link to="/home" @click.native="changeRoute('home')"> 首页 </router-link> ...
关于给router-link添加点击事件失效的解决方法
weixin_46212682的博客
03-28 1876
在router-link标签中，仅仅用于路由的切换，而router-link会阻止其他的点击事件的存在，加上native的作用是：给组件绑定原生事件 <router-link to="/" @click.native="muenSwitch(index)"> 首页 </router-link> 这样你就可以点击到相应的事件了 ...
详谈vue中router-link和传统a链接的区别
10-15
`<router-link>` 还允许自定义渲染标签，通过`tag`属性，你可以将其渲染为任意HTML元素，而不仅仅是`<a>` 标签。例如，你可能希望创建一个按钮来触发路由跳转，这时`<router-link tag="button">` 就派上用场了。 在...
解决Vue router-link绑定事件不生效的问题
10-15
然而在某些情况下，我们可能会遇到router-link绑定事件不生效的问题。以下内容将详细介绍这一问题及其解决方案，同时还会补充一些关于router-link使用过程中可能出现的其他问题和注意事项。 首先，需要了解router-...
vue router-link 默认a标签去除下划线的实现
01-18
补充知识：vue-router更改router-link点击时样式 默认类：router-link-active：可以通过在样式表中重新定义 基类：linkActiveClass：在创建路由时进行全局配置，linkActiveClass：/配置自定义类/ 以上这篇vue router...
技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效
yangyangdt的博客
01-05 2782
vue3中按vue2做，router-link并不能变样式，并且还是官方的绿色样式，显然在vue3中这个属性已经不适用了。因为在vue2中...
【JavaScript源代码】Vue router-view和router-link的实现原理.docx
12-29
Vue Router 是 Vue.js 应用中...`<router-link>` 负责创建可点击的导航链接，而 `<router-view>` 则根据当前路由呈现相应的组件。这种基于组件的路由管理方式使得 Vue.js 应用能够灵活地处理复杂的应用结构和导航需求。
vue router-link点击事件失效 - Kaiqisan
Kaiqisan的博客
09-15 1448
简答 ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである , 今天解决一个忘记很久的一个问题，今天又重新遇到了，就顺便讲掉。 vue router-link点击事件失效 简答 这样不行 <router-link to="/app" @click="doClick"> 点击跳转 </router-link> 这样行 <router-link to="/app" @click.native="doClick"> 点击跳转 </ro
阻止router-link跳转的方式
IU
02-16 2359
【代码】阻止router-link跳转的方式。
vue中router-link标签属性
zhiranyouni的博客
04-22 4299
to 表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。 <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home">Home&l...
vue router-link事件
Sensation_cyq的博客
06-25 413
初用vue     router-link事件点击不一起作用   使用v-on:click.native 就可以了   &lt;router-link to="" class="lgs_asms"   v-on:click.native="getYzm"&gt;获取验证码&lt;/router-link&gt;...
vue中＜router-link＞＜/router-link＞添加点击事件
fanyanjiang的博客
08-07 2980
点击事件失败原因： router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。 在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况 解决方案： 根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 所以如果在想要在router-link上添加事件的话需要@clic
vue.js学习-router-link
yujunlong3919的专栏
04-10 264
vue.jsurl:http://localhost:8080/#/block/tbb/0x009cc29c3debf773c76d8d51c0e42c2a0b2a78c3104802304b5b3730c4496bc8routes:{      path: '/block/tbb/:blockdata',      name: 'tbb',      component: TxByBlock}h...
router-link点击变色
不一样的烟火
08-10 1224
router-link-active：路由中，子路由的path设置（比如：/index/home）包含了父路由的path设置（比如：/index）,那么点击子路由的时候，给子路由添加router-link-active类时，父路由也有router-link-active类
router-link设置多种点击效果
08-17
你可以使用 Vue Router 的 `<router-link>` 组件来设置多种点击效果。`<router-link>` 可以包裹任何的元素，并且会自动添加 `to` 属性，将其转换为一个可点击的链接。 要设置多种点击效果，你可以使用 CSS 来自定义 `<router-link>` 的样式。以下是一些常见的点击效果示例： 1. 修改文本颜色： ```css .router-link-active { color: red; } ``` 在这个示例中，当链接处于活动状态时，文本颜色将变为红色。 2. 添加背景颜色： ```css .router-link-active { background-color: yellow; } ``` 在这个示例中，当链接处于活动状态时，背景颜色将变为黄色。 3. 使用过渡效果： ```css .router-link-active { transition: background-color 0.3s; } .router-link-active { background-color: yellow; } ``` 在这个示例中，当链接处于活动状态时，背景颜色将以过渡效果变为黄色。 这只是一些简单的示例，你可以根据自己的需求使用 CSS 来设置任何点击效果。希望对你有所帮助！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

《源码好优多》

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值