vue 导航内容设置选中状态样式

最新推荐文章于 2024-05-24 23:35:12 发布
最新推荐文章于 2024-05-24 23:35:12 发布
阅读量6.4k 收藏 1
点赞数
分类专栏： VUE 文章标签： 导航切换选中样式设置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guojing5721/article/details/80609305
版权

如图所示，我们一般需要切换的时候选中导航给个active样式，

而router-link 标签 在选中的时候  会自动给整个标签添加一个 router-link-active的class

可给router-link 标签里面的span、i标签如下设置，非常简单，下面是stylus的写法，不需要的话也可以写成平时的css写法

.router-link-active
span
i
color: red
Web攻城狮-前端
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现导航栏效果（选中状态刷新不消失）
11-27
Vue导航栏        用Vue写手机端的项目，经常会写底部导航栏，我这里总结一套比较方便实用的底部导航栏方法，并且可以解决浏览器刷新选中状态消失的问题。也可以选择自适应屏幕。看一下效果，底部的图标全是UI给的选中和未选中样式的图片，根据公司要求，你也可能会用fontsize去写。（全部代码黏贴到本文的最后面了） 1、首先把这些小图片放到src/assets路径下面（自动base64编码） 2、在data（）里边定义一个选中对应的变量isSelect，和循环遍历的数组，数组下面放图标对应的文字，和选中，未选中的图片地址。  注意：图片的地址不要直接写，直接写就是字符串，不仅会出现显
vue点击导航菜单，展示选中样式，菜单路由存在嵌套路由时也可以判断为当前路由
AKindofo的博客
06-02 522
【代码】vue点击导航菜单，展示选中样式，菜单路由存在嵌套路由时也可以判断为当前路由。
vue 纵向滚动菜单， 点击滚动到选中菜单
最新发布
无心使然云中漫步
05-24 450
需要设计一个纵向滚动菜单，要求丝滑点，默认显示选中菜单。
Vue 实现导航栏滑到顶部固定，滑动到相应位置导航栏有相应选中效果，点击导航跳转到对应位置
yhl_nsd的博客
03-23 9477
主要思路 导航栏固定 判断页面卷曲是否大于导航栏的offsetTop的值，超过了就证明导航栏到达了顶部，给导航栏添加固定样式的类名，注意：需要拿到导航栏固定前的offsetTop值，固定后的offsetTop值为0，会导致页面需要卷曲值为0时，导航栏才复位，中间会有一段突兀的情况。 滑动到相应位置导航栏有对应选中样式 html结构 <div class="about"> <div class="banner"><div class="wrap">&lt
前端Vue监听路由变化， 点击页面内按钮跳转菜单更改导航菜单选中状态
江咏之
05-09 4475
实际项目开发中有时候需要根据路由的变化去实进行一些操作，在此，我总结了三种方法。 1、watch监听 // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或者 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 .
vue3+element plus, el-menu导航选中后刷新页面保持当前选中状态
weixin_50161578的博客
09-21 1398
在el-menu的default-active中设置，
vue 导航内容设置选中状态样式的例子
10-16
今天小编就为大家分享一篇vue 导航内容设置选中状态样式的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
UI的`el-menu`导航中保持刷新后选中状态，我们需要结合Vue Router和`el-menu`的特性，通过`default-active`和`default-openeds`等属性来同步当前路由和菜单状态，并在组件初始化时根据当前路由动态设置选中和展开...
vue实现nav导航栏的方法
08-28
然后，需要在vue的data中定义一个isSelect变量来表示当前选中的导航，例如： ``` isSelect: '银行' ``` 在methods方法中，需要写上html中调用的事件，例如： ``` selectMapNav (title) { this.isSelect = title } `...
vue3+el-menu实现路由刷新左侧菜单栏保持选中状态
m0_59006402的博客
05-23 1755
给 el-menu 加上 :default-active="this.$route.path"问题描述： 使用el-menu 实现管理系统左侧菜单栏的时候，刷新页面，菜单栏的选中状态消失。
点击导航滚动到指定位置 (滑动到指定位置对应导航自动选中)Vue3+js
zhu_menglu的博客
12-22 2762
注：部分组件使用的naive-Ui。
vue 导航路由跳转点击两下，才会有选择中状态解决方案
Armof的博客
09-13 1650
1.vue 导航路由跳转点击两下，才会有选择中状态 2.问题本质是传递激活状态 3 在data面 **curren：0，**改进为 **current:this.$route.query.current | 0, 4.在点击时间里面添加 this.$router.push({path:toPath,query:{current:index}}) ...
Vue路由如何设置导航选中（高亮）
HELLO WORLD
05-26 4101
本文内容知识点比较简单，主要面向vue新手朋友们解答疑惑。vue前辈请忽略。 我自己学习vue的时候也有遇到过这个情况，看到一些新人朋友们在问，vue的路由怎么设置选中(高亮)呀？ 默认class是否可以不显示呀？ 请看下文
vue 选中切换样式
weixin_53816836的博客
06-22 516
在view内写入 判断语句 sty 和 sty1 都是view框的样式sty是选中前框的样式，sty1是选中后框的样式。font_1为选中前字体样式，.sty .font_2为选中后字体样式。），然后将两个样式名都写到相应的class里面。两个名字中间有一个空格。
elementui导航栏的使用和选中状态保持，以及重复点击报错
qq_42023279的博客
07-14 908
话不多说，直接开干 首先是引入elementui，根据项目需求，可以全局和局部引入，引入方法就不说了，看官网elementui官网 下面是代码格式: <el-menu v-if="JSON.stringify(menu) != '[]'" :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @clo
Vue 解决刷新浏览器 导航栏选中状态不消失
qq_54624631的博客
03-27 552
Vue导航栏选中状态后在刷新浏览器选中状态消失解决。遍历navdata数组…
router-link标签的选中激活导航router-link-active
斗师——Ace
02-27 7744
添加小程序，兑换各种视频教程/数据资源。 router-link: 其中tag='div'表示router-link为div标签 <template v-for="(item,index) in arr" v-if="arr.length>0"> <router-link tag="div" class="tab_item fle...
(笔记)vue通过当前路由来判断活动的菜单，刷新不失效
zongmaomx的博客
07-07 462
效果：当前选中的菜单背景色改为深色，通过路径来判断 在data中给imgs数组的对象添加link属性和对应的值 在style中设置当前活动菜单的背景色 在绑定class时通过判断当前路径中是否含有link来添加nownav class ...
VUE更改导航菜单栏选中的颜色
peri_zxy的博客
06-20 5998
修改element导航栏选中时的背景色，可以通过设置 .el-menu-item.is-active 选择器的样式属性【background-color】使用 !important 使得优先级最大。如下：
vue侧边栏导航选中动画效果
03-29
可以使用vue-router的导航守卫来实现侧边栏导航选中动画效果。具体实现步骤如下： 1. 在侧边栏导航组件中，使用vue-router的router-link组件来创建导航链接，并设置active-class属性为'active'，如下所示： ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值