vue路由设置高亮模式的时候默认路由一直是高亮,切换别的路由也还是高亮的解决办法

最新推荐文章于 2023-04-06 13:48:41 发布
最新推荐文章于 2023-04-06 13:48:41 发布
阅读量1k 收藏
点赞数
分类专栏： 笔记 总结 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45810135/article/details/108842584
版权

vue路由设置高亮模式的时候默认路由一直是高亮,切换别的路由也还是高亮的解决办法

在使用vue-router高亮 样式 .router-link-active 的过程中我发现,设置完这个属性有一个bug,那就是当我们切换路由的时候首页一直处于高亮状态,如下图:
悬系小说是我的默认子路由这里插入图片描述
悬系小说是我的默认子路由,所以会出现它一直高亮的状态.
解决办法 是给默认子路由添加 exact 属性就好了
在这里插入图片描述
如果对你有用,不要吝啬您的点赞哦!您的支持就是我前进的动力!

技术林
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element 导航与 router-link 之间的高亮失效问题，以及如何刷新保持高亮？
Wayne8016的博客
08-16 1851
百思不得其解，后来抽空好好想了想 先贴一张高亮失效的代码 然后这样写根本没有效果 去控制台看发现原来是 color 设置失效了 但是怎么弄都无法让它正常高亮，aaaa为啥？?? 原因应该是这样的，如果有大佬看见了觉得是我想错了，欢迎评论指出： router-link 默认渲染成的a标签，只有 link、hover、visited、active 四种状态，并没有当前高亮的状态...
router-link之导航图标不高亮解决方案总结
Homer_Simpson的博客
06-11 1429
用<router-link>做导航引发的选中图标不高亮bug； 如图所示： 引发bug的情况： 在子路由中使用<router-link>组件，在切换<router-view>时导致选项不高亮。 百思不得其解，百度说是路由配置方法不对，这里给出另外一种经过实践可用的方法。 解决方案： 在父组件中监听子路由变化，动态的给父组件选中的标签加上高亮class。 代码：...
Vue点到子路由，父级，无法高亮问题解决
*
12-25 1695
[问题] Vue点到子路由，父级，无法高亮 【原因】多是因为链接简写相对路径没有写完整导致 【解决】把子路由的router-link的to属性里链接写完整、并把router配置文件里path也写完整即可 1. hello.vue 【1】以下是路由链接 注意路径to要加上主组件，这样点到子路由里，主路由设置颜色才不会消失 <template> <div> <...
Vue----路由高亮 & 命名路由
emmmm.....
04-30 2002
文章目录3.6 路由高亮3.6.1 默认的高亮 class 类3.6.2 自定义路由高亮的 class 类3.7 命名路由3.7.1 使用命名路由实现声明式导航3.7.2 使用命名路由实现编程式导航 3.6 路由高亮 Vue3 可以通过如下的两种方式，将激活的路由链接进行高亮显示： ① 使用默认的高亮 class 类 ② 自定义路由高亮的 class 类 3.6.1 默认的高亮 class 类 被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名
vue项目解决刷新后，导航菜单高亮显示的位置不对
qq_42972187的博客
06-15 5268
1本人在学vue项目时遇到一个坑、在写vue项目头部导航时，比如点击第三个，刷新后，高亮状态显示在第一个： 现在是点击第三个页面 刷新后，是第一个页面高亮显示，但是因为路由路径没有改变页面内容还是第三个页面内容，改变的是导航的状态； 捯饬了好久才搞出来，伤的不轻，看控制导航状态的代码部分； 在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0，触发点击事件contact时候会...
vue-router二级导航切换路由及高亮显示的实现方法
12-09
Discover.vue： <!-- --> 发现 [removed] export default { name: "discover", data() { return { }; } }; [removed] <style scoped> </style> 第二个导航页面为Mymusic 其余代码...
vue项目实现设置根据路由高亮对应的菜单项操作
11-19
也可以在router路由数组里面设置meta信息，然后根据这个信息来判断是否高亮（这里可以循环生成菜单，不过我没有写）只是说一下思路 这样即可根据路由实现对应的菜单高亮了，我个人认为第二种比较灵活，如果菜单...
vue2 中二级路由高亮问题及配置方法
12-02
我初始化项目的时候初始化了路由，所以打开router/index.js文件进行修改配置 router/index.js import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import Game from '@...
vue 路由嵌套高亮问题的解决方法
01-19
正常路由嵌套是没有问题的，但是如果你已经在当前主路由页面了，然后再次点击主路由就会出现页面数据空白的情况 看代码： //主路由通过v-for循环出来 数据统
vue路由跳转，动态高亮显示问题 -- 亲测可用
qq_48113035的博客
04-12 1846
在项目中遇到一个问题，就是在跳转指定路由后，动态设置高亮显示。如图 然后封装了一个utils函数用来解决此问题。直接上代码： // 改变路由跳转后的高亮显示 // 参数1:index下标 // 参数2:element 元素类名 // 参数3:activeName 高亮类名 export default function (index, element, activeName) { // 获取所有节点,注意querySelectorAll是按顺序获取节点的. let allE
vue的router-link实现的组件切换，点击切换高亮模式
ddx2019的博客
06-02 4217
注意： router-link通过to属性指定目标地址， 默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.（如 <router-link to="/about" tag="li">About</router-link> 将渲染为 <li>About</li>）。 当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名(默认值是 router-link-exact-active)。 to="/about"
Vue Router构建选项linkActiveClass全局配置菜单高亮显示遇到的问题：默认第一个router-link高亮，点击第2个router-link第一个高亮不会被去除
u010234868的专栏
11-30 1132
目录： 初始代码如下： App.vue： <template> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> <router-view /> </div> </template> <script> exp
Vue Router构建选项linkActiveClass全局配置 ＜router-link＞ 默认的激活的class使菜单高亮显示
u010234868的专栏
09-27 340
以Vue CLI项目来说。 在router--》index.js中配置： export default new Router({ linkActiveClass: 'link-active', routes: [ { path: '/', redirect: '/home' }, ... ] }) App.vue中底部tabbar为需要高亮的菜单： <template> <div id="app"> .
vue-router
程序三两行
07-19 400
vue-router使用
Vue 页面刷新时菜单栏的高亮问题，默认路由
PrimaryColor
07-15 1329
data() { return { selectTag: "", //选择菜单 } } 在文件中的监听器如下： watch: { "$route.path": { handler(val) { console.log("菜单：", val); this.selectTag = val; //val是路由跳转的path }, immediate: true //立即执行 } },
vant 组件van-tabbar实现底部导航
yeyazi001的博客
04-06 4102
移动端小白，首次尝试移动H5开发，使用vant2的van-tabbar实现底部导航功能。本文忽略vant使用步骤，项目中使用全局引用。由于查询很多文章有的过于复杂，有的功能未实现，所以简单整理如有问题欢迎留言改正。底部导航栏简单实现，需要注意的是，组件是需要在所有需要使用的页面进行引用。所以将底部导航栏组合起来封装成一个组件。
Vant2的Tabbar标签栏第一个图标一直处于激活、高亮状态，无响应
R__Zoro的博客
01-10 643
Vant2的Tabbar标签栏第一个图标一直处于激活、高亮状态，无响应
vue中使用vant组件库中的tabbar标签栏组件，刷新后的高亮问题的解决
AMMRL的博客
02-21 2728
v-modle表示当前选中标签的名称或索引值，默认类型为number | string，默认值为0，通常标签中的v-modle = “active”,active需要在JS中的响应式数据中定义。 解决刷新后，高亮按钮显示与当前页面内容不匹配如下： mounted(){ // 解决刷新后，tabbar高亮按钮始终显示在第一个上 // window.location.pathname获取地址栏中的路径 switch( window.location.pathname)
使用vant 的tabbar，遇见第一个默认路径的图标，显示高亮不消除，且没办法点的问题
weixin_66720369的博客
05-30 1186
问题描述： 原因：官方给的是route 我们把它改成：完美解决。扣了半天脑壳
vue路由导航栏怎么设置高亮效果
最新发布
06-01
要设置 Vue 路由导航栏的高亮效果，可以使用 Vue Router 提供的 `router-link` 组件和 `router-link-active` 类。 首先，在 `router-link` 组件中添加 `exact-active-class` 属性和 `active-class` 属性，分别指定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值