vue 中使用element-ui的menu选中项高亮的问题

在使用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选中项高亮的问题相关推荐

vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总地表最强的电脑运行了一下,当 ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
模糊搜索——Vue单页面-Element UI
模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
Vue 篇解决ELement UI 中表单验证(多层Object嵌套)
项目场景: 提示:主要是在 Vue 框架中: 用 Element UI 提供的规则进行表单验证问题描述因为我 data 里面嵌套了多层 Object, 所以 Element UI 提供的表单验证没 ...
Vue引入第三方Element UI 组件
Element UI 官网地址: 各种基于Vue.js的各种UI组件 https://element.eleme.cn/#/zh-CN/component/quickstart https://ele ...
vue中使用iview UI
iview ui是一个强大的ui库基于vue,有很多实用的基础组件比elementui的组件更丰富,这里介绍如何在vue项目中使用iview开发项目.iview自己有一套后台管理模版iview-adm ...

vue 中使用element-ui的menu选中项高亮的问题

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

最新文章

热门文章