vue中的router-link不能动态绑定class

最新推荐文章于 2024-05-13 08:10:13 发布
最新推荐文章于 2024-05-13 08:10:13 发布
阅读量2.8k 收藏
点赞数 1
分类专栏： Vue学习 文章标签： vue router-link 动态绑定class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuefeng11111/article/details/80245994
版权

刚刚才发现，vue中的router-link好像在动态绑定class方面有问题，如下图


如果这个样子动态绑定router-link的class和div的class，你会发现，div的class动态绑定没有问题，当鼠标经过div的时候，div的颜色会发生改变，但是如果你的鼠标经过router-link的时候，你会发现，router-link的颜色并不会发生改变，我把动态绑定的方法几乎试遍了，还是没有解决这个问题，后来发现只能将router-link的触发事件绑定到其他的元素上，比如给router-link加一个父级div，这样就可以实现router-lin的class的动态绑定了


以上为我在开发中遇到的问题，如果有遇到相同问题的朋友，欢迎评论并发表你的见解

明天又会在哪里
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-router为激活的路由设置样式操作
11-20
然后在模板中，我们使用`router-link`组件来创建导航链接，并利用`:class`绑定来根据路由状态动态添加或移除`active`类。例如： ```html <ul class="nav"> <router-link to="/basicSearch" :class="{ 'link-...
解决vue-router-active无效问题
黑猫几绛的博客
05-24 2233
解决vue-router active-class无效问题 在自制tabBar中遇到了这些问题： （1）设置的样式中，path为'/'的icon始终被设置了active样式 解决办法: 由于router-link to的每个路由首部都存在'/'，因此都可以激活默认路由'/'，这也是为什么当path为'/'的时候始终有active样式，甚至出现了当点击其他tab按键时，出现了两个active样式。 在<router-linkto="/" >加上exact 属性 表示只有在地址为 /...
从 router-link linkActiveClass 到自己动态配置active class
weixin_41467159的博客
03-24 151
每次路由切换成功进入激活状态 在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？ 如何做？ 在路由里面设置 const ...
vue3路由页面切换动画
最新发布
irisMoon06的博客
05-13 694
从这个动态图能看出来，组件切换过程中新组件是立即加入到DOM，而旧组件的移除是先等待动画结束后再移除，所以当在外层定义了flex布局就会使其横向排列。另外Transition总是在旧组件元素下方插入了新组件元素，所以一开始提到的从左往右移动的时候，根据flex布局定位，动画开始时home组件本来是位于about右边的，但是要使其位于about左边，所以要设置其translateX(-200%)。知道了这个，那么接下来将应用其component切换触发的特性，编写路由切换的动画效果。
＜router-link＞
LH2HA3的博客
06-29 1709
基本用法
vue 路由跳转 自定义 class 不存在(被覆盖) router-link-active
cc_King的博客
05-08 464
文章目录问题描述解决办法 问题描述 页面第一次加载的时候(页面初始化)的时候，自定义路由是生效的； 但是路由跳转出去之后，跳回来，class就设置不上了； 一开始以为自己代码逻辑有问题，检查半天不是； 换一个方法写，还是只有第一次加载失效，那么肯定不是我代码逻辑的问题了； debugger 发现，自定义 class 其实是加上去的，但是最后却不见了 (一_一)，懵逼ing…； 折磨半天，突然反应过来 router-link-active 这个小东西不也是加上去的吗？会不会是覆盖了； 那么问题来了 rou
vue动态绑定class时遇到的问题
VladimirZL的博客
02-22 9022
写项目的时候遇到一个很奇怪的问题，可能是我对vue的了解很浅，希望有大神能帮我解决一下，问题如下 本来想实现动态绑定class，却发现了很奇怪的问题，代码如下 从代码看，是个很简单的逻辑， 通过button点击变色，使data中的值改变，从而给div绑定新的class，因为在真正的项目中click是一个ajax请求，为了制造异步，我用了一个setTimeout，一秒钟之后再改变值，页...
解决Vue Router中所有router-link都添加Class样式的原因
weixin_49031883的博客
08-20 72
是因为页面的所有都写的一个跳转路径，更改跳转路径即可。
router-link常用属性
秋来九月八
11-05 2298
totag属性replace属性native修饰符active-class属性appendeventexactrouter-link 是 Vue Router 提供的用于导航的组件，它可以用来创建链接到不同路由的链接。
Vue 页面跳转不用router-link的实现代码
08-27
Vue 页面跳转不用 router-link 的...本文介绍了 Vue 页面跳转不用 router-link 的实现代码，包括使用 v-if 指令控制页面显示和隐藏、使用数据绑定控制页面显示和隐藏，以及使用 router-link 跳转传值示例实现页面跳转。
解决vue-router中的query动态传参问题
08-27
解决vue-router中的query动态传参问题 在Vue Router中，query参数的动态传递是一个常见的问题。该问题的解决方案可以分为两步：首先，在模板中使用v-bind指令将id绑定到li元素上，然后在router-link中使用该id作为...
vue-router之nuxt动态路由设置的两种方法小结
10-17
在某些情况下，我们可能需要在事件处理器中动态地导航到某个路由，这可以通过调用`this.$router.push()`方法实现。下面是如何在列表项上实现这一功能的示例： ```html <div class="mov-container" v-for="item in ...
vue-router二级导航切换路由及高亮显示的实现方法
10-16
Vue Router是官方推荐的路由库，它允许我们定义动态和嵌套路由，实现导航和页面间的平滑过渡。本篇文章将深入探讨如何在Vue Router中实现二级导航的切换路由以及高亮显示。 首先，我们要创建两个主要的导航页面，...
如何通过路由链接设置class类？
qq_46580571的博客
08-08 480
如何通过路由链接设置class类？
Vue 列表动态绑定点击样式（active class）以及路由router-link点击样式(router-active-class)
Yuval的博客
01-26 6645
  Vue - 列表动态绑定点击样式（active class）   动态绑定样式是我们经常用到的，所以直接整理了方便以后查阅 用到的相关知识在vue文档   1.普通的列表动态绑定点击样式   来个小demo，实现的是一个点击绑定动态样式active-class的效果 通过index与nowIndex(当前index)作比较，若相同，active-class则为true，显示...
vue中的router-link linkActiveClass属性
Little_Flower的博客
03-07 6388
在路由中配置linkActiveClass属性 export default new Router({ routes: [ { path: '/', name: 'HolleWorld', component: HolleWorld } ], linkActiveClass: 'active' // active为路由激活时...
linkActiveClass
wenjiusui8083的博客
12-07 1966
linkActiveClass 类型: string 默认值: "router-link-active"    //router到这个地方会自动生成这个class 全局配置  的默认『激活 class 类名』     .tab       display: flex       width: 100%       height: 40px       l
vue: router-link 动态路由
u012872771的博客
09-12 1438
动态路由: 根据路由的不同请求不同的数据。 $router 获取vue-router实例 $route 获取url的详细信息 :id表示在user后任意参数都可以访问到对应组件，但是必须有" / "。 如: loc...
Vue-Router（学习的简单记录）
weixin_47416815的博客
01-28 148
如何改变URL页面还不刷新 1.hash location.hash = 'bbb' 2.HTML5的history模式: pushState // 入栈 history.pushState({},'','home') // 出栈一个（第一个是栈顶） history.go(-1) // 出栈两个 history.go(-2) // 压栈两个 history.go(2) // 压栈一个 等于 history.go(1) history.forward() // 出栈 history.back() 等于
vue3中router-link to不生效
08-30
在Vue3中，`router-link`的`to`属性不生效可能是因为使用了错误的导航方式或者没有正确配置路由。在Vue3中，使用`router-link`时，需要确保已经正确安装并配置了Vue Router。另外，`to`属性的值应该是一个有效的路由...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值