vue刷新左菜单消失_vue+Element框架menu菜单刷新后保持选中状态

最新推荐文章于 2024-07-26 15:05:11 发布

weixin_39859715

最新推荐文章于 2024-07-26 15:05:11 发布

阅读量2k

点赞数 3

文章标签： vue刷新左菜单消失

本文链接：https://blog.csdn.net/weixin_39859715/article/details/113020436

版权

一直以来没有养成记录分享的习惯,后面发现这样很不好,所以开了自己的博客园,希望和大家一起进步!

前段时间用vue+Element做了一个后台项目，其中用Element的menu菜单组件的时候遇到一个问题。点击选中某个菜单，刷新后，选中状态会消失。苦思无果，于是网上查看了一下，很多都写到用default-active属性进行设置,至于设置方法对于小白来说看的有点懵.后来终于看到一个大神写的方法很简单好用,所以记录下来!

其实很简单,在路由设置里给每个页面跳转项设置一个name属性,属性值就是el-menu-item 里面的index值,具体看下图:

现在路由中为每个跳转的页面配置name属性,属性值就是el-menu-item 里面的index值,菜单组里面的default-active设置一个属性active进行绑定.

绑定一个自定义属性active,用来控制当前选中哪个菜单.

接下来只要在页面渲染的时候让active等于当前路由下的name属性就可以了,这样刷新后选中状态依然保留了!

第一次写随笔记录,大神勿喷!

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39859715

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

通过vue刷新左侧菜单栏操作

10-14

2. **路由样式问题**：有时菜单项的选中状态可能与实际激活的路由不匹配，这可能是因为路由没有正确地与菜单项关联。确保菜单项的`index`或`route`属性与路由配置中的`path`相匹配。 3. **多级菜单**：对于有子菜单...

vue 导航菜单刷新状态消失，显示路由首页的问题

D.D.U的博客

12-24

2085

问题使用vue element-ui框架构建公共导航栏（https://element.eleme.cn/#/zh-CN/component/menu）按F5刷新或按浏览器的刷新按钮就会返回默认定义的路由首页在网上找了很多的资料都很复杂，没有有效解决解决最终发现一老哥的博客：https://blog.csdn.net/shichong123/article/details/8061766...

参与评论您还未登录，请先登录后发表或查看评论

使用vue-element-admin框架，刷新路由导致左侧导航栏菜单消失解决办法

Cody_LC的博客

07-28

1204

vue框架

Vue3中使用vue-router刷新获取动态路由时页面丢失的问题

最新发布

weixin_40389330的博客

07-26

1056

vue3中关于页面刷新动态路由组件消失的问题

elementUI的NavMenu的选中状态刷新会丢失解决方法

weixin_42178670的博客

04-19

957

方式一：当你的路由模式为hash模式时： mounted() { // activeIndex最终绑定给<el-menu :default-active="activeIndex"> this.activeIndex = window.location.href.split('#')[1]; } 方式二：当你的路由模式为history模式时： mounted() { // activeIndex最终绑定给<el-menu :default-active="activeIn

Element-Plus导航栏刷新高亮消失（解决）

Daisy_ls的博客

02-28

1516

element项目左侧导航栏里面的高亮，点击时都正常展示，一旦刷新页面，高亮就消失了，但是页面还是之前点击的页面。为了解决这个问题，试了网上说的所有方法，最后发现是少加了一个符号。

vue3实现动态菜单和动态路由和刷新后白屏处理

bu_xiang_tutou的博客

03-12

6951

项目中，当每一个角色得到的界面不一致的时候，我们就不能使用静态菜单了，而是要从后端得到动态的菜单数据，然后动态的将菜单数据展示在界面上。除了在界面展示，也还要将界面的路由动态添加，在路由动态添加之后，你可能会出现刷新界面，界面变白的情况，页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了。这种情况我会在最后给一个处理方法。

vue中用this.router.push()路由params传参遇到的页面刷新数据丢失问题

vfjcgg的博客

11-06

9382

最近项目中涉及到跨页面传参数和后台进行数据交互以及用this.router.push()路由params传参遇到的页面刷新数据丢失问题，看到需求之后第一反应就是用路由传参来解决，Vue中提供了三种路由传参方式：第一种：params传参 this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} })

使用element-ui的el-menu导航选中后刷新页面保持当前选中状态

10-16

综上所述，要实现在Element-UI的`el-menu`导航中保持刷新后选中状态，我们需要结合Vue Router和`el-menu`的特性，通过`default-active`和`default-openeds`等属性来同步当前路由和菜单状态，并在组件初始化时根据...

vue+element使用动态加载路由方式实现三级菜单页面显示的操作

10-14

在Vue.js框架中，结合Element UI库，动态加载路由是一种高效的方法来管理复杂的应用程序菜单结构，特别是当涉及到多级菜单时。以下是如何使用这种方式实现三级菜单页面显示的详细步骤和知识点：首先，动态加载路由...

vue.js+element-ui动态配置菜单的实例

10-18

Vue.js 是一款流行的前端框架，它提供了数据绑定和组件化的能力，使得开发用户界面更为便捷。Element UI 是一套基于 Vue.js 的开源 UI 组件库，主要用于构建企业级的 Web 应用，它提供了丰富的组件，如表格、按钮、...

vue+element NavMenu 导航菜单选中状态失效解决方法

你好！刘斩仙

06-06

9103

问题：左侧菜单，选中状态失效，1.路由跳转过来，选中失效；2.刷新页面失效解决方法 1.路由跳转（NavMenu子菜单没有v-if）+刷新 app.vue //html <el-menu router ref='menu' :default-active='$route.path' class="el-menu-vertical-demo" backgrou...

vue顶部菜单加左侧菜单_通过vue刷新左侧菜单栏操作

weixin_32021519的博客

12-31

2300

今天完成了手头任务就想着做点什么，刚好领导让我看看项目左侧菜单栏不刷新的问题，我也是刚刚接触vue，很多东西都还不是很熟练，这也是我的第一篇自己写的博客，感觉还是很兴奋的，我觉得写博客这个习惯要一直养成，不但总结了自己一天的工作所得，而且也是对自己的一种良好习惯的养成。下面进入正题。这个是我们html里面的超链接，而我们的点击事件的跳转就是通过这个超链接实现的。然后我们要创建一个js文件，将我们要...

解决点击按钮实现路由跳转后Element导航菜单没有同步选中状态的问题

weixin_55995662的博客

03-19

1548

点击按钮是时候会出现高亮选中状态，但是通过刷新，点击按钮进行路由跳转，或者手动输入url时，选中状态不会同步变化，其实解决问题的方法很简单。将Element的default-active的参数改成根据路由的变化进行同步跳转的交互，就可以实现导航菜单同步更新 ...

vue添加了路由不在左边菜单栏显示

青春不打烊的博客

07-10

6180

{ path: '/monitoring', component: Layout, meta: { title: '设备监控信息' }, children: [ { path: 'monitoringconf', name: 'monitoringConf', component: () => import('@/views/monitoring/monitoringConf/index'), .

el-menu 导航栏菜单当右边的内容部分跳转路由，导航栏高亮的部分不亮了

weixin_44816197的博客

01-04

1606

右边跳转路由，左边的红色高亮就消失了。先看一下 el-menu里的两个配置项这两个配置项可以知道这个 index也就是跳转路由的路径然后在配置路由的js文件里下面的/learningStatisticsDetails是在上面的/learningStatistics里面跳转的，这样设置之后，跳转到/learningStatisticsDetails里，/learningStatistics这个部分也是激活状态的，导航栏的高亮部分就不会消失了^ ^ ...

解决 el-menu 刷新丢失选中状态

郑州彭于晏

09-23

2179

<el-menu :default-active="activerouter" class="el-menu-vertical-demo" background-color="#13141f" text-color="#fff" active-text-color="#fff" router style="h

vue3+el-menu实现路由刷新左侧菜单栏保持选中状态

m0_59006402的博客

05-23

1921

给 el-menu 加上 :default-active="this.$route.path"问题描述：使用el-menu 实现管理系统左侧菜单栏的时候，刷新页面，菜单栏的选中状态消失。

vue路由设置：父路切换子路由 active样式消失

u014288878的博客

08-17

643

这里的优惠券详情是在优惠券页面跳转进入的页面，我们需要给不显示在菜单栏的页面设置一个选中的路径，注意要带上父路径属性path，这里的父路径是第二行的/Productmanagement和第十二行的coupon。这里/Productmanagement/coupon等同於coupon,两种写法都可以，优惠券详情的path也可以写成path: 'coupon/WorkFormEdit/:couponid/:memberid'。在你的代码中，你将它用于标识一个菜单项的标题，以便在侧边栏菜单中设置选中效果。

vue侧边菜单栏导航

09-15

Vue侧边菜单栏导航是一种常用的网页导航方式。它通常位于页面的侧边栏，用于展示网站或应用的不同功能页面或模块，并提供用户快速切换页面的功能。 Vue框架提供了开发这种导航组件的便利性。我们可以使用Vue的组件化能力，将侧边菜单栏导航拆分成多个组件，使得每个导航项都可以独立管理和维护。这样，当我们需要增加、删除或修改导航项时，只需要修改相应的组件代码，无需影响其他部分。在实现侧边菜单栏导航时，我们可以使用Vue Router进行页面的切换。通过在导航菜单组件中配置路由链接，当用户点击某个导航项时，Vue Router会根据配置的路由规则，动态加载对应的组件，并渲染到主内容区域。为了增加用户体验，我们可以使用Vue的动画效果来实现导航菜单的展开和收起。当用户点击导航菜单的折叠按钮时，我们可以通过动画效果平滑地展开或收起导航菜单，使页面的切换过渡更加流畅。另外，为了提高导航的可用性，我们可以在导航菜单中添加一些交互效果，比如在用户当前所处页面的导航项上添加高亮效果，以提示用户当前所在的位置。我们也可以为导航菜单项添加一些图标或标识，使得用户更容易辨认各个功能页面。总之，Vue侧边菜单栏导航是一种简洁、灵活、易于维护的网页导航方式。通过合理的组件划分、使用Vue Router实现页面切换、应用动画效果和交互效果，能够为用户提供良好的导航体验，并提高网站或应用的可用性和用户满意度。