问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :router="true" background-color="#091639" text-color="#ff...
当页面刷新时,Vue组件的生命周期会重新开始,所有基于Vue的数据绑定和状态管理都会被重置。因此,el-menu组件中的选中状态(如果是通过Vue的数据属性控制的)也会在刷新后丢失。 3. 查找或设计解决方案来保持el-menu的选中状态 为了保持el-menu的选中状态在刷新后不变,我们可以考虑以下几种方案: 方案一:使用本地存储(...
<el-menu :default-active=‘$route.path‘ :router=‘true‘ :unique-opened=‘true‘ :default-openeds="defaultOpeneds"background-color="#bd1e22"text-color="#fff"active-text-color="#ffd04b">//router当导航激活时允许以index作为路由进行页面的跳转,$route.path当前路由对象的路径,字符串,绝对路径/...
一、菜单项激活状态保持 二、实现页面的路由刷新(局部刷新)
(1)、<el-menu> 设置属性 :default-active="activeIndex" (2)、watch方法检测路由变化 (3)、created生命周期设置路由 具体代码如下: <template> <div id="app"> <el-menu :default-active="activeIndex" background-color="#545c64" text-color="#fff" ...
1、如果给default-active设置一个默认值,那么刷新页面时,会出现一个问题,即路由地址和菜单对应的index是不一致的。 <el-menu routerdefault-active="/"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"> image.png 如上图所示,当前页面应该是数据分析,路由地址是/analyse,但是刷新页...
页面1 页面2 解决方案: 1.在配置路由的时候,设置meta属性,把同一el-menu-item下的页面设置成相同的值.也考虑过把name设置成相同的值,但是显然不行,浏览器会报路由名字相同的警告 {path:"/companyinfo",name:"companyinfo",component:()=>import(/* webpackChunkName: "companyinfo" */"../views/CompanyInf...
<el-menu class="el-menu-vertical-demo" unique-opened router :class="{'toggled': toggled}" :default-active="$route.path"> <template v-for="(menu, index) in menus"> <el-submenu :index="index+''"> <template slot="title"><i class="el-submenu__icon el-icon-plus"></i><span ...
elementui高亮某一行 el-menu高亮,在使用element中的menu组件时,根据官方文档,可以设置给el-menu设置router属性为:true,给el-menu-item设置index的值为路径,就可以实现点击导航跳转到指定路由。这样做虽然能实现跳转,但是,若刷新浏览器,则导航会跳转到默认的选中项