使用饿了吗的路由,使用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. .NET 对 XML 进行创建,增加,删除,修改操作整理

    前言: 最近做了一个项目,程序A在一个服务器程序B在另一台服务器,然而主程序A需要访问程序B的图片集文件夹下载到本服务器上,为了防止多次对Web Services进行调用,在主程序A中创建一个XML文 ...

  2. 【python】字符串

    >>> str1="welcom to China">>> str1[2:4]'lc'>>> str1[7]'t'>&g ...

  3. TCP/IP----基本知识

    就以这篇文章为起点,开始自己的学习计算机网络之路.这些仅是我个人之言,如有差错,希望读者能够逐一指出,在下不胜感激. 首先,我们需要知道一些关于网络的基本知识. 网络中的关系大多为拓扑结构.那么,何为 ...

  4. Sublime Text编辑器 + vim插件

    Sublime安装 Sublime Text 是一个代码编辑器.Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim. Su ...

  5. jemeter——badboy导入的jmx文件自带元件解析

    线程组设置与解析 含义:1秒启动100个线程,每个线程循环调用20次请求  (包括FTP请求.Java请求.http请求,根据你提交的请求而定) delay thread creation until ...

  6. 并行rsync

    #!/bin/bash ]; then echo -e "usage : \n\t$0 hostList src_file dst_path" echo -e "exam ...

  7. Oracle数据库部分迁至闪存存储方案

    Oracle数据库部分迁至闪存存储方案 1.实施需求 2.确认迁移表空间信息 3.确认redo信息 4.确认undo信息 5.表空间迁移到闪存 6.redo迁移到闪存 7.undo迁移到闪存 8.备库 ...

  8. scalajs_初体验

    scalajs是将scala编译成js的编译器,目的在于使用scala的众多类库和强类型特征构建出稳定可扩展的js应用. build.sbt构建文件如下: enablePlugins(ScalaJSP ...

  9. c#程序连接mysql,报"Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLICIT) for operation '='"的解决方案

    =============================================== 20170607_第一次修改                       ccb_warlock === ...

  10. MySQL如何找到表与表之间的关系?

    如何找到两张表之间的关系? 先站在左表的角度上去找,如果可以找到左表的多个字段可以对应右表的一个字段,那么左表的一个字段foregin key右表的一个字段.一般情况下为id... 2.如果右表的多个 ...