element-ui,router.push到其他路由,菜单栏不会高亮对应的路由
使用饿了吗的路由,使用this.$router.push({path: ''})跳到其他的路由,菜单不会高亮。
如图所示,点击图上三个位置,需要使用this.$router.push({path: ''})跳到其他的路由,但是跳过去之后,左侧的菜单并不会高亮,查资料后说的是要把路由写的和index一样,但是没有解决,后来才知道,使用vue的bus解决。
1.在assets文件夹下建js/bus.js
import Vue from 'vue'
export default new Vue()
2.在执行跳转的页面引入bus.js
import Bus from '@/assets/js/bus' /*
*跳转随访计划
*/
toHz() {
this.$router.push({path: '/PatientList'})
Bus.$emit('activeIndex2','/PatientList')
},
3.在home.vue监听emit传值
<el-menu :default-active="defaultActive" class="el-menu-vertical-demo" background-color="#465672" text-color="#c0d3f3" active-text-color="#eb683f" ref="elMenu" router @select="selectMenu">
//...
</el-menu>
//引入bus.js
import Bus from '@/assets/js/bus'
//监听activeIndex2的内容 mounted(){
var self = this
Bus.$on('activeIndex2',function(defaultActive) {
self.defaultActive = defaultActive
})
},
emit传值,on监听,然后赋值给默认的:default-active,结束。
element-ui,router.push到其他路由,菜单栏不会高亮对应的路由的更多相关文章
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- VUE-008-通过路由 router.push 传递 query 参数(路由 path 识别,请求链接显示参数传递)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...
- VUE-007-通过路由 router.push 传递 query 参数(路由 name 识别,请求链接显示参数传递)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...
- VUE-006-通过路由 router.push 传递 params 参数(路由 name 识别,请求链接不显示)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...
- vue-router同路由$router.push不跳转一个简单解决方案
vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: toCurrentPage: function(thisId){ this.$rout ...
- Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)
一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...
- 【转】Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)
一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...
随机推荐
- Asynchronous vs synchronous client applications(MQTT)
来自我的CSDN博客 想查看英文原文的请点击原文网址.在上两篇翻译中,Homejim我给大家分别翻译了同步客户端应用程序和异步客户端应用程序.本人对这两个的区别也有困惑,因此将paho下的这个比较 ...
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- jemeter——badboy导入的jmx文件自带元件解析
线程组设置与解析 含义:1秒启动100个线程,每个线程循环调用20次请求 (包括FTP请求.Java请求.http请求,根据你提交的请求而定) delay thread creation until ...
- 栈stack(1):栈的数组实现
定义 栈(stack),是一个只允许在表尾端进行删除插入操作的线性表,是一种后进先出(LIFO,last in first out)的数据结构. 因此,对于栈来说,我们规定进行删除插入操作的表尾端称为 ...
- Xamarin Android自定义文本框
xamarin android 自定义文本框简单的用法 关键点在于,监听EditText的内容变化,不同于java中文本内容变化去调用EditText.addTextChangedListener(m ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- 百度文库的实现——java利用openoffice,批量word转pdf
百度文库的主要功能就是将上传的word文档,转码成pdf格式再展示出来.其中有四种方法可以实现这样的操作: 方法一:用apache pio 读取doc文件,然后转成html文件用Jsoup格式化htm ...
- linux部署solr服务--小记
1.将solr压缩包上传到web项目-solr文件夹下 2.解压solr-5.5.4.zip到当前文件夹下 linux 解压zip文件到当前目录 unzip filename.zip 提示没有unzi ...
- 关于理解python类的小题
今天看了python部落翻译的一篇<一道python类的小题>文章,感觉挺有启发性,记录下来: print('A') class Person(object): print('B') de ...
- Git详解之八:Git与其他系统
Git 与其他系统 世界不是完美的.大多数时候,将所有接触到的项目全部转向 Git 是不可能的.有时我们不得不为某个项目使用其他的版本控制系统(VCS, Version Control System ...