情况一:单个菜单页面刷新导航失去高亮;(如下图这种菜单类型) 问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :ro...
default-active用于设置初始激活的菜单项索引,而v-model(在较新版本的Element Plus中可能使用)则用于双向绑定当前激活的菜单项索引。 2. 分析el-menu刷新时状态丢失的原因 当页面刷新时,Vue组件的生命周期会重新开始,所有基于Vue的数据绑定和状态管理都会被重置。因此,el-menu组件中的选中状态(如果是通过Vue的数据属性...
1、如果给default-active设置一个默认值,那么刷新页面时,会出现一个问题,即路由地址和菜单对应的index是不一致的。 <el-menu routerdefault-active="/"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"> image.png 如上图所示,当前页面应该是数据分析,路由地址是/analyse,但是刷新页...
1.在配置路由的时候,设置meta属性,把同一el-menu-item下的页面设置成相同的值.也考虑过把name设置成相同的值,但是显然不行,浏览器会报路由名字相同的警告 {path:"/companyinfo",name:"companyinfo",component:()=>import(/* webpackChunkName: "companyinfo" */"../views/CompanyInfo.vue"), // 重点在此...
二、实现页面的路由刷新(局部刷新) 想要实现路由的刷新,官方并没有给出解决办法,通过自己摸索和借鉴,得出了以下解决方法: 首先,新建一个空白页面redirect.vue,然后写入这样一段代码: <script> export default { beforeCreate() { console.log(this.$route) ...
(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" ...
否则组件就会被循环引用最终出现“max stack size exceeded”的错误。10 注意事项：1，刷新定位当前路由，需要在el-menu标签中定义:default-active="$route.path"，这样当你刷新路由时就会自动定位但当前的路由位置。2，el-submenu和el-menu-item标签中的index属性定义，需要解析下路由将要跳转的路由赋给index。
<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的值为路径,就可以实现点击导航跳转到指定路由。这样做虽然能实现跳转,但是,若刷新浏览器,则导航会跳转到默认的选中项
element 组件的el-menu 在router模式下已经打开的页面在刷新后即使设置了:default-active="this.$route.path"但是还是合上了,不过高亮还是有的下面是代码`<el-aside width="200px"><el-menu :default-active="this.$route.path" class="el-menu-vertical-demo" ...