• 首先说下遇到的问题

    • 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 导航子路由不选中问题的更多相关文章

  1. 前端小菜鸡使用Vue+Element笔记(一)

    关于使用Vue+Element的项目简介~ 最近因为项目组缺前端人员,所以自己现学现做页面,先把前后台功能调通 觉得前端可真的是不容易呀哎呀~ 首先记录一下相关的Vue入门的教程: vue环境搭建示例 ...

  2. 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  3. (vue.js)Vue element tab 每个tab用一个路由来管理?

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  4. Vue+Element实现网页版个人简历系统

    这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue.element.css3.css定位. 作者在window10进行开发,目前只在chrome上进行过测试,没有大 ...

  5. 循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

    在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图 ...

  6. 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...

  7. 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

    在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...

  8. 循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

    我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...

  9. 循序渐进VUE+Element 前端应用开发(17)--- 菜单资源管理

    在权限管理系统中,菜单也属于权限控制的一个资源,应该直接应用于角色,和权限功能点一样,属于角色控制的一环.不同角色用户,登录系统后,出现的系统菜单是不同的.在VUE+Element 前端中,我们菜单结 ...

随机推荐

  1. JNI开发流程

    交叉编译 在一个平台上去编译另一个平台上可以执行的本地代码 cpu平台 arm x86 mips 操作系统平台 windows linux mac os 原理 模拟不同平台的特性去编译代码 jni开发 ...

  2. 生产环境中Redis的key的设计

    问题:如果我们需要将MySql表的数据存储到Redis中该如何存储? 例如:有t_user表 id username email  11 leo  leo@163.com  22  laymans   ...

  3. 爬虫——网页解析利器--re & xpath

    正则解析模块re re模块使用流程 方法一 r_list=re.findall('正则表达式',html,re.S) 方法二  创建正则编译对象 pattern = re.compile('正则表达式 ...

  4. 用Python操作文件

    用Python操作文件 用word操作一个文件的流程如下: 1.找到文件,双击打开. 2.读或修改. 3.保存&关闭. 用Python操作文件也差不多: f=open(filename) # ...

  5. 通过对微信pc hook实现微信助手

    本软件主要通过对pc端微信hook来实现的,微信版本2.6.8.52. 软件下载地址: http://blog.yshizi.cn/104.html 软件实现功能: 支持爆粉 支持文本消息群发 支持自 ...

  6. 洛谷 P1980【计数问题】 题解(2)

    还有一种办法,就是用stringstream函数将每一次的数全都转化成char一维数组样式的字符串,然后逐位扫一遍即可. (记得判断字符时将规定数字+48) //Stand up for the fa ...

  7. 【LeetCode】322-零钱兑换

    题目描述 给定不同面额的硬币 coins 和一个总金额 amount.编写一个函数来计算可以凑成总金额所需的最少的硬币个数.如果没有任何一种硬币组合能组成总金额,返回 -1. 示例 1: 输入: co ...

  8. Python批量删除mysql中千万级大量数据

    场景描述 线上mysql数据库里面有张表保存有每天的统计结果,每天有1千多万条,这是我们意想不到的,统计结果咋有这么多.运维找过来,磁盘占了200G,最后问了运营,可以只保留最近3天的,前面的数据,只 ...

  9. 七个开源的 Spring Boot 前后端分离项目,一定要收藏!

    前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年 ...

  10. python安装第三方包的安装路径, dist-packages和site-packages区别

    简单来说 如果是系统自带的python,会使用dist-packages目录 如果你手动安装python,它会直接使用目录site-packages 这允许你让两个安装隔离开来 dist-packag ...