使用饿了吗的路由,使用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到其他路由,菜单栏不会高亮对应的路由的更多相关文章

  1. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  2. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  3. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  4. VUE-008-通过路由 router.push 传递 query 参数(路由 path 识别,请求链接显示参数传递)

    在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...

  5. VUE-007-通过路由 router.push 传递 query 参数(路由 name 识别,请求链接显示参数传递)

    在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...

  6. VUE-006-通过路由 router.push 传递 params 参数(路由 name 识别,请求链接不显示)

    在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...

  7. vue-router同路由$router.push不跳转一个简单解决方案

    vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: toCurrentPage: function(thisId){ this.$rout ...

  8. Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

  9. 【转】Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

随机推荐

  1. Django的设计模式

    MVC模式 MVC将应用程序分解为三个组成部分:mode(模型).view(视图).control(控制器),其中: M 管理应用程序的状态(通常存储到数据库中),并榆树改变状态的行为(或者叫&quo ...

  2. Function:html结构转字符串形式显示

    //Html结构转字符串形式显示 支持<br>换行 function ToHtmlString(htmlStr) { return toTXT(htmlStr).replace(/\&am ...

  3. androidSD卡操作

    1.获取SD卡目录:File file = Environment.getExternalStorageDirectory(); 2.获取SD卡路径:String path = Environment ...

  4. Linux 学习记录 一(安装、基本文件操作).

         Linux distributions主要分为两大系统,一种是RPM方式安装软件的系统,包括Red Hat,Fedora,SuSE等都是这类:一种则是使用Debian的dpkg方式安装软件的 ...

  5. ArcGIS API for JavaScript 4.2学习笔记[12] View的弹窗(Popup)

    看本文前最好对第二章(Mapping and Views)中的Map和View类有理解. 视图类有一个属性是Popup类型的popup,查阅API知道这个就是视图的弹窗,每一个View的实例都有一个p ...

  6. Selenide UI 自动化测试

       我没有拼写错误,确实不是 Selenium ,但是,只要是 Web UI 自动化测试框架,基本上都是基于Selenium 的.Selenide 也不例外.那为啥不直接用Selenium呢? 因为 ...

  7. a:hover标签已经定义了text-decoration:none,并且生效,但是还是有下划线

    a标签在F12计算出来的样式里 text-decoration:none; 确实有被应用到.但是链接的下划线并没有被去掉... 解决办法:p:commandLink <p:commandLink ...

  8. 使用trim_galore软件遇到的问题

    我的原始测序数据是双端测序,在用trim_galore软件去接头的这一步,使用的命令行是 time nohup trim_galore R17002628-SKOV3-m6A_combined_R1. ...

  9. [编织消息框架][网络IO模型]Netty Reactor

    严格来讲Netty Reactor是一种设计模式,一听模式两字就知道了吧,套路哈哈 Reactor中文译为“反应堆”. 看图netty处理流程 1.netty server 至少有两组reactor. ...

  10. CSS样式表学习

    ---恢复内容开始--- 今天学习的主要内容是样式表和选择器. 1.样式表的分类 1.内联式样式表 特点:能实现精确控制,但是范围太小.页面显示的优先级高于其他样式表 2.内嵌式样式表 特点:必须在h ...