情况一:单个菜单页面刷新导航失去高亮;(如下图这种菜单类型) 问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :ro...
1.在配置路由的时候,设置meta属性,把同一el-menu-item下的页面设置成相同的值.也考虑过把name设置成相同的值,但是显然不行,浏览器会报路由名字相同的警告 {path:"/companyinfo",name:"companyinfo",component:()=>import(/* webpackChunkName: "companyinfo" */"../views/CompanyInfo.vue"), // 重点在此...
1、如果给default-active设置一个默认值,那么刷新页面时,会出现一个问题,即路由地址和菜单对应的index是不一致的。 <el-menu routerdefault-active="/"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"> image.png 如上图所示,当前页面应该是数据分析,路由地址是/analyse,但是刷新页...
当页面刷新时,Vue组件的生命周期会重新开始,所有基于Vue的数据绑定和状态管理都会被重置。因此,el-menu组件中的选中状态(如果是通过Vue的数据属性控制的)也会在刷新后丢失。 3. 查找或设计解决方案来保持el-menu的选中状态 为了保持el-menu的选中状态在刷新后不变,我们可以考虑以下几种方案: 方案一:使用本地存储(...
想要实现路由的刷新,官方并没有给出解决办法,通过自己摸索和借鉴,得出了以下解决方法: 首先,新建一个空白页面redirect.vue,然后写入这样一段代码: <script> export default { beforeCreate() { console.log(this.$route) const nextPath = this.$route.query.nextPath ...
(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" ...
<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 ...
2019-12-21 20:15 − EL表达式: 称为表达式语言、作用:替换和简化jsp页面中的java代码语法:${表达式} jsp默认支持EL表达式 \${表达式} -- 忽略这个表达式 EL表达式支持 1算数运算符: 2比较运算符: 3逻辑运算符: 4空运算符: ... 秦明科 0 223 Tkinter 之Menu菜单标签 2019-11-04 09:47 − 一...
5 在路由中有些路由是不需要在菜单中显示的，比如注册、登录、找回、401、404、500等页面，所以我们在定义路由的时候可以添加一个属性来过滤掉不需要显示的路由。6 先来实现一个简单的一级菜单，屏蔽掉含有hidden属性的路由，然后通过routes方法我们先对路由进行判断，先获取路由中的路由信息并将路由赋给subroutes，...
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" ...