关于VUE + Element 侧边栏页面刷新后不高亮显示的问题

最新推荐文章于 2024-08-08 08:48:09 发布
原创 最新推荐文章于 2024-08-08 08:48:09 发布 · 1.1k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#VUE #elementui

本文介绍如何在Element UI的后台管理系统中实现侧边栏导航的选中状态(高亮显示)在页面刷新后仍能保持不变的方法。通过设置`default-active`属性为当前路由路径`$route.path`来解决此问题。

写后台管理系统 我们会经常用到element,侧边栏导航的时候路由跳转没有问题 但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了，针对这个问题特别提出以下见解：


直接贴代码：

<el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      text-color="#333"
    >
      <el-menu-item  index="/situation" @click="go('/situation')"
        ><img src="../assets/img/qyts.png" alt="" /><span class="oneName"
          >全员态势</span
        ></el-menu-item
      >
      <el-submenu index="2" @click="go()">
        <template slot="title">
          <!-- <i class="el-icon-user"></i> -->
          <img src="../assets/img/jcsj.png" alt="" />
          <span class="oneName">基础数据</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/healthTable" @click="go('/healthTable')" class="twoName"
            >心率监测</el-menu-item
          >
          <el-menu-item index="/healthsleep" class="twoName" @click="go('/healthsleep')">活动状态</el-menu-item>
          <el-menu-item index="/healthmovement" class="twoName" @click="go('/healthmovement')">运动监测</el-menu-item>
          <el-menu-item index="/healthoxygen" class="twoName" @click="go('/healthoxygen')">血氧监测</el-menu-item>
          <el-menu-item index="/temperature" class="twoName" @click="go('/temperature')">体温监测</el-menu-item>
          <el-menu-item index="/police" class="twoName" @click="go('/police')">电子围栏</el-menu-item>
          <el-menu-item index="/Staydetection" class="twoName"  @click="go('/Staydetection')">停留监测</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/person" @click="go('/person')">
        <img src="../assets/img/grxx.png" alt="" />
        <span class="oneName">个人信息</span>
      </el-menu-item>
</el-menu>

这里使用了：
router模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，所以我将el-menu-item的index设置成了path路由
default-active则是当前激活菜单的index。

之后这里利用了以上两点，将default-active绑定为$route.path，例如当前页面是全员态势，那么就是/situation。这样即使刷新也不会失去高亮显示状态。

vue3+element-plus：解决侧边导航在页面刷新后失去高亮的问题，导航菜单使用vue-router刷新后高亮显示不一致完美解决办法（导航menu高亮变色问题，无需大改动即可解决，详细实例代码
高级前端工程师
08-17 4474
vue3 element中导航menu高亮变色问题，Element-Plus导航栏刷新高亮消失，页面刷新后侧边导航失去高亮，导航栏根据路由改变状态，Vue3中使用el-menu高亮显示问题，菜单高亮激活跳转，刷新后继续高亮刷新前的菜单选项，element-plus menu 设置default-active 页面刷新时 导航高亮 踩坑，解决Vue导航栏路由跳转，浏览器刷新后导航块高亮消失，解决Vue3 使用Element-Plus导航刷新active高亮消失，el-menu添加router属性文字颜色选中激
解决Element-UI 侧边栏页面刷新后不高亮显示的问题
尘生杜若
05-08 4539
最近在写一个后台管理系统，用的vue+element，搞到侧边栏导航的时候路由跳转没有问题，但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了，因为项目时间比较紧，并且没有影响到我后面的开发所以就搁置了一段时间，今天有时间搞了一下，发现想的时候可能有些复杂，其实这个问题还是比较简单的。 例如：下面这段代码 <template> <el-aside width="240px"...
解决VUE + Element 侧边栏页面刷新后不高亮显示的问题
LJJONESEED的博客
07-20 713
<el-menu :default-active="$route.path" //写上这句就好了 >
vue实现导航栏效果（选中状态刷新不消失）
11-27
Vue导航栏        用Vue写手机端的项目，经常会写底部导航栏，我这里总结一套比较方便实用的底部导航栏方法，并且可以解决浏览器刷新选中状态消失的问题。也可以选择自适应屏幕。看一下效果，底部的图标全是UI给的选中和未选中样式的图片，根据公司要求，你也可能会用fontsize去写。（全部代码黏贴到本文的最后面了） 1、首先把这些小图片放到src/assets路径下面（自动base64编码） 2、在data（）里边定义一个选中对应的变量isSelect，和循环遍历的数组，数组下面放图标对应的文字，和选中，未选中的图片地址。  注意：图片的地址不要直接写，直接写就是字符串，不仅会出现显
解决Vue导航栏路由跳转，浏览器刷新后导航块高亮消失
qq_65388624的博客
08-23 2376
解决Vue导航栏路由跳转，刷新后导航块高亮消失
vue使用elementUI刷新页面保持菜单栏选中状态
青峦。的博客
08-06 1391
<el-menu :default-active="this.$route.path" class="el-menu-demo" mode="horizontal" background-color="#1A545A" text-color="#fff" active-text-color="#fff"> <SidebarItem v-for="route in permission_routes" :key="route.path" :item="route" :base-p
element导航菜单使用vue-router模式选中菜单项没有高亮
qq_29236119的博客
12-02 2329
1、使用element的导航菜单点击当前菜单时没有高亮，解决方法 问题原因： ①、:default-active的值不要写成具体的内容值，要改成$route.path ②、el-menu-item种的:index也要改成对应的路由值
Element-UI 侧边栏高亮
qq_44706779的博客
02-18 1994
Element-UI 侧边栏高亮一、出现场景二、解决办法1. F5 刷新高亮问题2. 前进后退后高亮不同步问题 一、出现场景 在使用 Element-UI 的侧边导航栏时我遇到了两个问题： 按 F5 刷新页面后，导航栏默认折叠起来，并且无高亮显示 点击浏览器的前进后退按钮后，高亮显示与页面内容不同步 下面我就这两个问题给出自己的解决办法。 二、解决办法 1. F5 刷新高亮问题 原理：当地址栏发生变化时，修改改变默认显示高亮的值。 首先给导航栏加上 default-active 属性，记得加上冒号。
vue侧边栏动态生成下级菜单的方法
10-18
在Web开发过程中，使用Vue.js框架进行动态侧边栏菜单的构建是一项常见的需求，尤其是当菜单项需要根据用户角色或者权限动态改变时。Vue.js提供了灵活的数据绑定机制，使得动态生成侧边栏和下级菜单变得相对简单。...
Vue---day08侧边栏导航（双层for循环、字体图标、高亮显示）
ZHUSHANGLIN的博客
08-08 489
【代码】Vue---day08侧边栏导航（双层for循环、字体图标、高亮显示）
vue+elementUI管理后台的列表页进入详情页
热门推荐
jiajiaranbaobao的博客
11-15 1万+
后台管理系统中经常要实现这样一个事儿，点击列表页的某一条，进入详情页，网上百度许久后，发现不能完全解决我的问题。在请教一位前端同学后，来总结下。 1，在列表页中定义点击跳转的方法： openDetail:function (row) { this.$router.push({path:'newUserDetail',query:{id:row.id}}); }, 2，在详情页接收这条数据的id：t...
vue-element-admin点击进入详情页，侧边栏高亮问题
qq_41838435的博客
07-06 1859
vue-element-admin点击进入详情页，侧边栏高亮问题 只需要在meta里面添加activeMenu { path: '/example', component: Layout, redirect: '/example/list', name: 'Example', meta: { title: 'Example', icon: 'el-icon-s-help' }, children: [ {
Vue点到子路由，父级，无法高亮问题解决
qq_38472465的博客
08-31 360
Vue点到子路由，父级，无法高亮问题解决
解决前端开发路由跳转之页面跳转，左侧菜单栏高亮显示跟随
weixin_58149434的博客
06-27 864
return {},methods: {},},if (index!== -1) {== -1) {} else {},
vue-element-admin路由切换到新增或编辑页面后侧边栏依然高亮
huangsy421的博客
02-05 674
分析： 原模板中使用:default-active="KaTeX parse error: Expected '}', got 'EOF' at end of input: … return this.route.meta.guidePath ? this.route.meta.jumpPath:this.route.meta.jumpPath : this.route.meta.jumpPath:this.route.path },
解决Vue3 使用Element-Plus导航刷新active高亮消失
键指江湖的博客
08-03 2000
解决vue3使用element plus导航菜单刷新页面后active高亮消失的问题
Vue路由跳转时导航栏更新
Tang__CT的博客
04-28 1650
Vue路由跳转时导航栏更新 问题描述 在调用函数中跳转路由，但是侧边栏没有更新激活的高亮状态 排查 查看路由跳转后，侧边栏中active_index的session储存正常 由于侧边栏由组件引入，所以其create生命周期函数没有运行 即侧边栏组件刷新状态时发现组件没有刷新 解决方法 在create生命周期中创建强制刷新页面 location.reload() 过程 再次调用此函数跳转路由，会自动刷新页面，获取session储存中的active_index数据，更新侧边栏的激活索引，完成导航
使用el-menu-item点击页面不高亮
tx_sb的博客
02-20 1189
使用$route.fullPath使完整路径与menu-item的index属性相匹配。该组件只有default-active的值与index相同时才能高亮，因此在路径携带query参数的情况下，使用完整路径可以使路径+参数进行对比，保证选中项可以高亮。
解决elementUI菜单在vue中切换路由不高亮的问题
hailangtuteng的博客
01-29 1万+
场景：项目中需要用到webscoket  推送过来的信息 点击信息按钮  跳转到指定的页面 路由改变了 可是菜单还是上一次的菜单高亮 elementUI 里面有个属性  通过设置这两个属性实现激活菜单的颜色 active-text-color 当前激活菜单的文字颜色（仅支持 hex 格式） string — #409EFF   text-color ...
vue+element侧边菜单导航栏如何配置路由和写vue组件
最新发布
03-26
<think>嗯，用户想了解如何在Vue项目中使用Element UI实现侧边菜单导航栏，并配置路由和组件。首先，我需要回忆一下Element UI的组件库，特别是菜单部分。记得Element UI有el-menu组件，可以用来做侧边栏导航。然后，路由配置方面，Vue Router是必须的，需要嵌套路由和动态路由吗？ 用户提到了引用中的内容，比如静态展示和commonAside组件。可能需要先创建菜单组件，用el-menu-item和el-submenu来构建层级结构。然后，路由配置部分，应该在router/index.js里定义路由，尤其是children属性来实现嵌套。 另外，引用里提到main.vue使用了Container布局容器，所以布局方面可能需要el-container、el-aside和el-main组件。侧边栏放在el-aside里，主内容区用el-main作为路由出口。 还有，菜单的点击事件需要绑定路由跳转，可能用Vue Router的push方法。动态菜单数据的话，可能需要从vuex或者计算属性获取，根据路由配置生成菜单项。可能需要处理有子菜单和无子菜单的情况，用v-if或者计算属性来判断。 步骤大概是：安装依赖、创建布局组件、配置路由、编写菜单组件、绑定路由跳转。然后还要考虑菜单的高亮状态，用router-link-active类或者el-menu的default-active属性。可能需要动态设置default-active，根据当前路由路径。 示例代码部分，需要展示main.vue的结构，包括el-container，el-aside引入commonAside，el-main放router-view。commonAside组件里用el-menu，遍历路由信息生成菜单项，用index属性绑定路由路径，处理点击事件用$router.push。 最后，要检查是否需要嵌套路由，子路由的配置是否正确，以及菜单项如何根据路由配置动态生成。可能还需要处理图标和样式，但用户主要关注功能和路由配置，所以示例代码可以简化样式部分。 用户可能遇到的问题包括路由不匹配、菜单高亮不正确、点击菜单没反应，这些都需要在步骤中说明如何处理，比如确保路由路径正确，使用vue-router的方法导航，设置默认激活的菜单项。 总结下来，步骤是安装Element UI和Vue Router，创建布局组件，配置路由信息，编写动态菜单组件绑定路由，处理点击事件和高亮状态。示例代码需要覆盖这些方面，并确保语法正确。</think>以下是在Vue项目中使用Element UI实现侧边菜单导航栏的完整实现步骤： ### 一、基础环境搭建 1. 安装依赖 ```bash npm install element-plus vue-router ``` ### 二、布局组件实现 ```vue <!-- main.vue --> <template> <el-container> <el-aside width="200px"> <common-aside :menuData="menuList" /> </el-aside> <el-main> <router-view /> </el-main> </el-container> </template> <script> import CommonAside from &#39;./components/CommonAside.vue&#39; export default { computed: { menuList() { return this.$router.options.routes } }, components: { CommonAside } } </script> ``` ### 三、菜单组件开发 ```vue <!-- CommonAside.vue --> <template> <el-menu :default-active="$route.path" router unique-opened > <template v-for="item in menuData"> <el-submenu v-if="item.children && item.children.length" :index="item.path" :key="item.path" > <template #title> <i :class="item.meta.icon"></i> <span>{{ item.meta.title }}</span> </template> <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path" > {{ child.meta.title }} </el-menu-item> </el-submenu> <el-menu-item v-else :index="item.path" :key="item.path" > <i :class="item.meta.icon"></i> <span>{{ item.meta.title }}</span> </el-menu-item> </template> </el-menu> </template> <script> export default { props: { menuData: { type: Array, default: () => [] } } } </script> ``` ### 四、路由配置示例 ```javascript // router/index.js const routes = [ { path: &#39;/&#39;, component: () => import(&#39;@/views/main.vue&#39;), children: [ { path: &#39;/dashboard&#39;, name: &#39;Dashboard&#39;, meta: { title: &#39;仪表盘&#39;, icon: &#39;el-icon-monitor&#39; }, component: () => import(&#39;@/views/Dashboard.vue&#39;) }, { path: &#39;/user&#39;, meta: { title: &#39;用户管理&#39;, icon: &#39;el-icon-user&#39; }, children: [ { path: &#39;list&#39;, name: &#39;UserList&#39;, meta: { title: &#39;用户列表&#39; }, component: () => import(&#39;@/views/user/List.vue&#39;) } ] } ] } ] ``` ### 五、核心实现要点 1. **路由联动**：通过`router`属性开启vue-router模式，菜单项的index值自动匹配路由路径[^3] 2. **动态激活**：`default-active`绑定`$route.path`实现菜单状态同步[^4] 3. **嵌套处理**：使用`el-submenu`配合路由的children配置实现多级菜单[^1] 4. **数据驱动**：通过计算属性获取路由配置生成菜单结构[^2]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值