Vue Element 导航子路由不选中问题
- 首先说下遇到的问题
- 1.进入嵌套路由,当前父导航无法高亮显示
- 2.页面刷新后导航重置问题
- 3.在嵌套路由刷新页面也会导致导航重置问题
- 接下来是解决方案:
elementUI 里面有个属性 default-active(当前激活菜单的 index)
<el-menu :default-active="activeIndex" @select="handleSelect" router></el-menu>
data () {
return {
activeIndex: '/'
}
},
watch: {
'$route' () {
this.handleSelect(this.activeIndex)
}
},
mounted () {
this.activeIndex = this.$route.matched[0].path || '/'
},
methods: {
handleSelect (index) {
this.activeIndex = index
}
},
这样就OK了
END
觉得有帮助的小伙伴点个赞支持下~
觉得有帮助的小伙伴点个赞~
Vue Element 导航子路由不选中问题的更多相关文章
- 前端小菜鸡使用Vue+Element笔记(一)
关于使用Vue+Element的项目简介~ 最近因为项目组缺前端人员,所以自己现学现做页面,先把前后台功能调通 觉得前端可真的是不容易呀哎呀~ 首先记录一下相关的Vue入门的教程: vue环境搭建示例 ...
- 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚
新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...
- (vue.js)Vue element tab 每个tab用一个路由来管理?
(vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理 时间:2017/5/13 0:24:01 关键词: 关于网友提出的“ (vue.js) ...
- Vue+Element实现网页版个人简历系统
这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue.element.css3.css定位. 作者在window10进行开发,目前只在chrome上进行过测试,没有大 ...
- 循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理
在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图 ...
- 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
- 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用
在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...
- 循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理
我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...
- 循序渐进VUE+Element 前端应用开发(17)--- 菜单资源管理
在权限管理系统中,菜单也属于权限控制的一个资源,应该直接应用于角色,和权限功能点一样,属于角色控制的一环.不同角色用户,登录系统后,出现的系统菜单是不同的.在VUE+Element 前端中,我们菜单结 ...
随机推荐
- MyBatis 返回 Map 字段丢失问题
问题现象 执行存储过程返回 Map 集合数据,发现有字段丢失情况,仔细研究发现丢失的字段值都为 NULL. 解决办法1: 在查询 SQL 语句中增加 NULL 判断函数 MSSQL: isnull(字 ...
- Linux--进程管理--06
1.操作系统的基础 调用:kernel通过给应用程序提供system call的方式来提供硬件资源: 注意:应用程序也包括库文件 库文件是运行在ring0上的一段程序代码,不对客户直接提供应用 2.程 ...
- 洛谷- P1306 斐波那契公约数 - 矩阵快速幂 斐波那契性质
P1306 斐波那契公约数:https://www.luogu.org/problemnew/show/P1306 这道题目就是求第n项和第m项的斐波那契数字,然后让这两个数求GCD,输出答案的后8位 ...
- hdu 5945 Fxx and game(dp+单调队列! bc#89)
Young theoretical computer scientist Fxx designed a game for his students. In each game, you will ge ...
- 树莓派4B安装64位Linux(不用显示器键盘鼠标)
入手了树莓派4B,我对它的定位是作为一个Docker实验环境,平时用到的镜像多为Java服务端常用的技术.以及自己作的Java应用镜像,因此宿主机需要64位操作系统,而树莓派官方操作系统只有32位的, ...
- net core天马行空系列: 一个接口多个实现类,利用mixin技术通过自定义服务名,实现精准属性注入
系列目录 1.net core天马行空系列:原生DI+AOP实现spring boot注解式编程 2.net core天马行空系列: 泛型仓储和声明式事物实现最优雅的crud操作 哈哈哈哈,大家好,我 ...
- 还不会用 K8s 集群控制器?那你会用冰箱吗?(多图详解)
作者 | 阿里云售后技术专家 声东 导读:当我们尝试去理解 K8s 集群工作原理的时候,控制器(Controller)肯定是一个难点.这是因为控制器有很多,具体实现大相径庭:且控制器的实现用到了一些较 ...
- ECMAScript es6新功能讲解视频教程
下载链接:https://www.yinxiangit.com/1.html 目录: 01.课程介绍-ECMAScript 新功能.mp402.块的作用域-let.mp403.恒量-const.mp4 ...
- spring接口文档注解:@ApiOperation(转)
spring接口文档注解:@ApiOperation @ApiOperation不是spring自带的注解是swagger里的 com.wordnik.swagger.annotations.ApiO ...
- JSP四大作用域属性范围
JSP四大作用域分别为:page, request ,session, application . 第一个作用域是page,他只在当前页面有效,也就是用户请求的页面有效,当当前页面关闭或转到其他页面时 ...