vue爬坑记:关于遇到侧边栏高亮的坑

最新推荐文章于 2023-05-31 16:44:41 发布
最新推荐文章于 2023-05-31 16:44:41 发布
阅读量2.5k 收藏
点赞数
分类专栏： vue 日常学习和储备[暂存区] 文章标签： vue侧边栏高亮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webfullstack/article/details/80804872
版权

写在前面:由于vue使用的还不怎么熟练,在设置不同的路由之间跳转需要设置高亮时卡住了,所以记录下遇到的问题.

  • 遇到的问题

    1. 自己写的高亮class在页面刷新时失效,总是第一个高亮
    2. 使用vuex传需要高亮的index值时,使用$store.state.count值传递不到js里面去,只能在html里面用;
    3. 使用vueRouter中的router-link传值时,也是传递不到js里面去;

  • 解决方法
    使用vue自己的高亮class名 .router-link-exact-active,重新定义而且在页面刷新时高亮的class也跑到第一个去了^+^;

说明自己的基础还是不牢固,还需要努力啊!!!

Ant-Design-Vue快速上手指南+排坑
m0_73085893的博客
08-22 1275
Ant Design Vue 提供了一套灵活的样式定制方案，允许开发者根据品牌或项目需求，调整组件的样式和颜色。Less 变量覆盖：Ant Design Vue 的样式基于 Less，通过覆盖 Less 变量来实现主题定制。开发者可以在项目中创建一个 Less 文件，例如theme.less，来定义自定义的变量值。// 自定义主题变量// 全局主色// 链接色// ... 更多变量Webpack 配置：在项目的 Webpack 配置中，通过的modifyVars选项引入自定义的 Less 变量。
vue项目解决刷新后，导航菜单高亮显示的位置不对
qq_42972187的博客
06-15 5419
1本人在学vue项目时遇到一个坑、在写vue项目头部导航时，比如点击第三个，刷新后，高亮状态显示在第一个： 现在是点击第三个页面 刷新后，是第一个页面高亮显示，但是因为路由路径没有改变页面内容还是第三个页面内容，改变的是导航的状态； 捯饬了好久才搞出来，伤的不轻，看控制导航状态的代码部分； 在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0，触发点击事件contact时候会...
vue-sidebar-menu:Vue.js侧边栏菜单组件
05-12
Vue侧边栏菜单 Vue.js侧边栏菜单组件 演示版 本文档适用于Vue 2，对于Vue 3，您可以尝试预发行版，请参见 安装 npm i vue-sidebar-menu --save 全局安装插件。 //main.js import Vue from 'vue' import VueSidebarMenu from 'vue-sidebar-menu' import 'vue-sidebar-menu/dist/vue-sidebar-menu.css' Vue . use ( VueSidebarMenu ) 或在本地导入组件。 //App.vue import { SidebarMenu } from 'vue-sidebar-menu' export default { components : { SidebarMenu } } 基本用法 < temp
vue项目：侧边栏搭配路由侧边栏高亮
yayay1010的博客
07-30 1592
如果项目中使用的是element-ui 可以直接使用它的NavMenu组件实现导航栏高亮，它会在activeIndex字段自动识别，匹配到下面item的index，给它加上高亮效果，所以我选择item循环的时候，index绑定每个字段的路由地址，在computed中计算当前路由前两个字段，并赋值给activeIndex，这样可以保证刷新保持高亮效果 <el-menu :default-a...
Vue-路由导航菜单栏的高亮设置
忘掉地平线
11-12 6190
默认情况下，路由的导航菜单，会自动给当前菜单添加router-link-exact-active 和router-link-active 类。 我们可以通过 linkActiveClass 来修改 router-link-active 这个类名， 在路由规则配置中添加配置项linkActiveClass: ‘mui-active’，通过’mui-active’来自定义控制菜单栏切换样式
【jq】手风琴三级侧边栏目点击高亮
Dust storm的博客
01-10 381
手风琴三级侧边栏目点击高亮
侧边栏通过地址栏的跳转显示高亮
qq_43765727的博客
10-24 378
解决vue 给window添加和移除resize事件遇到的坑
11-20
然而，在实际开发过程中，可能会遇到一个常见的问题，即在离开当前页面后，窗口大小改变时，仍然会触发已移除的监听事件。这通常是因为移除事件监听器时的方法引用不正确导致的。 首先，来看看问题的产生。在最初的...
小红书html布局自适应,GitHub - zhudavid80/vue-redbk: vue仿小红书个人开源项目
weixin_34552443的博客
06-22 1510
小红书，发现全世界的好东西! 种草种的好，美得比人早!在线预览点我有惊喜哦(PC端建议在Chrome下开启调试模式，移动端直接在浏览器中打开就好)项目描述技术栈Vue2.0全家桶 + axios + Vuex + Mint-Ui + Mock.js + Stylus主要依赖使用vue-cli2.0搭建项目框架使用vue-router2.7进行页面路由切换使用json server进行http请求获...
vuePC端项目踩坑记录
super琪的博客
05-20 880
本文档用于记录vue相关PC端遇到的一些问题记录，方面团队成员共享 一、element-ui踩坑记录： 1、el-carousel 使用el-carousel幻灯片时，动态设置轮播时间interval。需要同步动态绑定autoplay的值。否则会出现轮播卡顿或者延迟的问题。与源码中定时器有关。需要关闭定时器再重新赋值 2、el-table sortable表格排序 只需要用的升降排序，在<...
vue实现侧边栏导航效果
01-19
本文实例为大家分享了vue侧边栏导航的具体代码，供大家参考，具体内容如下 最终效果 点击下一个导航，上一个导航自动收回 实现代码 1.下载vue-router npm install vue-router --save-dev 2.在main.js中引入 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 引入路由 3.在components中新建组件 3.1 agencySearch.vue组件 代码： 直属下线代理查询 </
如何实现侧边栏高亮
liwenrou的博客
07-02 1119
一、背景介绍侧边栏高亮是指选择侧边栏菜单时有一个样式效果,当刷新页面的时候,这个效果还在.二、知识剖析侧边栏高亮有很多种实现方法.目前大部分是使用localStorage和sessionStorage来实现三、常见问题如何实现高亮的?四、解决方案侧边栏高亮有很多种实现方法,在复盘项目中，我使用判断当前url和点击选项的url来实现子模块的状态保存。html为&lt;uib-accordion cl...
Vue-后台管理项目001---侧边栏
初遇我ㄖ寸の热情呢？
05-28 2274
将这个真实的服务返回的数据赋值给res。// 跳转到login。// 清空token。
vue 动态菜单侧边栏
weixin_46772652的博客
12-15 3130
1，创建vue的左侧导航栏组件 <template> <div> <!-- 根据实际情况做修改 --> <el-menu-item v-for="(item,index) in navlist" :key="index" v-if="item.adminMenu.menuType =='page'" :index="item.adminMenu.path" > <i
侧边栏高亮问题
大桶爆米花eee
06-03 446
在侧边导航栏中点击某一项“账单”，此时账单菜单栏中高亮，路由配置为’/list’，从’/list’页面可以点击详情，可以进入详情页面查看详情。 此时，路由发生变化，activeClass将随着路由的变化，从’/list’ 身上移到’/detail’上了，侧边栏的active Class不在了。 如何 在’/detail’ 页面，也要 ‘/list’ 这个页面的样式（高亮）保留住呢？ 解决思路：给’/detail’ 加上一个路由元信息，在侧边栏去检查路由元数据，然后看是否需要给其active class。
Iviw 组件库中侧边栏刷新，高亮不能更新的问题
茗霜的博客
06-16 327
iview中active-name是对于选项中的name，表示高亮那个选项，在组件初始化之后，判断当前路由与侧边栏相对应的路由是否一致，再将active-name绑定即可 侧边栏组件信息 <template> <Menu :active-name="menuList" theme="light" width="100%" hide-trigge...
【无标题】vue封装侧边栏
weixin_60924822的博客
05-31 792
（px to rem 比例是144 需要使用px可以转回来）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值