在使用element中的menu组件时,根据官方文档,可以设置给el-menu设置router属性为:true,给el-menu-item设置index的值为路径,就可以实现点击导航跳转到指定路由。

这样做虽然能实现跳转,但是,若刷新浏览器,则导航会跳转到默认的选中项,而不是我们离开时的导航。

 百度时大部分回答是将default-active属性设置为:$route.path,这样页面重新渲染时就会选中当前的路由了。可是,解决了刷新的问题,还有一个从页面上的按钮跳转到其他页面的问题,比如导航列表:a路由(导航一)、b路由(导航二),从b可以跳转c,跳转到c时,导航栏选中的应该是导航二,然而设置为$route.path 后,此时因为路由变了,找不到与index匹配的路由了,导航栏就不会再高亮了。

仔细读element官网上的menu属性,发现还有一个属性没用上,就是el-menu-item的router属性,它的值是vue router对象,通过尝试发现:default-active匹配的是index值,当将el-menu的router属性设置为true时,跳转的路由如果没有设置route,则使用的是index的值,如果写了route,则路由使用的是route的值,通过这一点儿特性,于是想了一个办法:

在router.js里设置路由时,给相同导航高亮的路由设置相同的name属性,如图:
  
然后在menu组件上设置default-active的值为:$route.name,这样就可以实现刷新时导航栏选中当前页的问题。最后设置el-menu-item的index属性为router.js文件里跳转路由的name值,route属性为:路由的path,如图:

通过这样设置,就可以实现刷新页面时,导航栏的选中项和页面显示一致,并且从b页面跳转到c页面时,还能保持b选中的状态。

效果图如下:



最后点击去“child1”的按钮,跳转到child1,导航栏会自动选中到导航一。

至此,刷新问题和跳转页面时导航栏的选中问题就解决了。
-------------------------------------------------------------------------------------分割线------------------------------------------------------------------------------------------

刚又想了另外一种方法,与上述方法有异曲同工之妙,哈哈哈哈!

先将路由这样修改:

这样name属性不用一致了,只需要设置需要高亮相同导航栏的路由的路径有相同的路径,如:"/two/*",然后设置menu组件上的参数:

default-active有计算属性getActive得到,如下图:

这样设置之后,也可以达到上述的效果。

vue 中使用element-ui的menu选中项高亮的问题相关推荐

  1. vue中修改Element ui样式不起作用

    公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...

  2. php和ui,php项目中使用element.ui和vue

    1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...

  3. 基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册

    基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册 前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs ​ 官网下载地址:http ...

  4. npm创建Vue工程【element UI】

    npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...

  5. vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款

    vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...

  6. 模糊搜索——Vue单页面-Element UI

    模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...

  7. Vue 篇 解决ELement UI 中表单验证(多层Object嵌套)

    项目场景: 提示:主要是在 Vue 框架中: 用 Element UI 提供的规则进行表单验证 问题描述 因为我 data 里面嵌套了多层 Object, 所以 Element UI 提供的表单验证没 ...

  8. Vue引入第三方Element UI 组件

    Element UI 官网地址: 各种基于Vue.js的各种UI组件 https://element.eleme.cn/#/zh-CN/component/quickstart https://ele ...

  9. vue中使用iview UI

    iview ui是一个强大的ui库基于vue,有很多实用的基础组件比elementui的组件更丰富,这里介绍如何在vue项目中使用iview开发项目.iview自己有一套后台管理模版iview-adm ...

最新文章

  1. react-flux单向数据流
  2. Tomcat 教程之快速入门
  3. Oracle 表的创建 及相关參数
  4. c++ map iterator 获取key_Java集合框架——Map接口
  5. 模板:拓展kmp(Z函数)
  6. mysql 建表uk_mysql建表规范
  7. 持续集成部署Jenkins工作笔记0008---创建用于测试的Maven工程
  8. 用ASP.NET Core 2.0 建立规范的 REST API -- GET 和 POST
  9. 我的梦想——吃喝玩乐
  10. 王振质问于谦,死得越多说明越伟大?
  11. Prism初研究之使用Prism 5.0开发模块化应用
  12. Revit二次开发之创建共享参数及绑定共享参数【比目鱼原创】
  13. Softwaredistribution与系统瘦身
  14. 初学爬虫,简单爬取必应壁纸
  15. 实战:RBAC(基于角色的权限控制)-2021.11.28
  16. 百度ai人体关键点识别
  17. 视频会议的进化方向是什么?
  18. 关于问答系统(QA)、对话系统(Chatbot)的学与思
  19. 4K工业级高清2进1出HDMI自动USB KVM多电脑切换器(MT-HK201)
  20. input 获取焦点的情况

热门文章

  1. 男人要“强”,不要“软”“弱”,“虚”得一匹
  2. 【IT行业就业困难的原因及程序员找不到工作的分析,计算机行业的未来发展前景如何?】
  3. 在word07中如何添加单独一页横向文件
  4. 人智导(十七):基于知识的方法
  5. UE4中的GameplayTag:使用层级概念标签来管理对象
  6. CSS制作出绚丽燃烧的火狐狸
  7. JIRA REST API(一)
  8. java逻辑运算符之异或
  9. 写给太阳村张老师及其员工的公开信
  10. QQ群文件、相册、等等无法正常打开,一直显示在加载中的解决方法