使用饿了吗的路由,使用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. 开源免费接口管理平台eoLinker AMS开源版 V3.2.0更新,增加批量导出导入接口功能!

    eoLinker是一个免费开源的针对开发人员需求而设计的接口管理工具,通过简单的操作来帮助开发者进行接口文档管理.接口自动化测试.团队协作.数据获取.安全防御监控等功能,降低企业的接口管理成本,提高项 ...

  2. nginx日常维护常用命令

    http://www.jb51.net/article/47750.htm 一.简明nginx常用命令 1. 启动 Nginx poechant@ubuntu:sudo ./sbin/nginx 2. ...

  3. Lucene实现索引和查询

    0引言 随着万维网的发展和大数据时代的到来,每天都有大量的数字化信息在生产.存储.传递和转化,如何从大量的信息中以一定的方式找到满足自己需求的信息,使之有序化并加以利用成为一大难题.全文检索技术是现如 ...

  4. less基础语法

    变量 //->LESS代码 @link-color: #428bca; @link-color-hover: darken(@link-color, 10%); a { color: @link ...

  5. [转]winform 自动伸缩控件xpandercontrols 使用说明

    链接地址:http://blog.sina.com.cn/s/blog_b5b004920101f5h3.html

  6. C++ 头文件系列(set)

    简介 头文件包含set.multiset两个类模版,这里要描述的概念与map非常相似,甚至连成员函数都几乎一样,所以这篇随笔会很短. set set如果翻译成中文应该是集合的意思,这里更确切的说是唯一 ...

  7. lua 实现tableToString

    function tableToString(studentNum) local str = "{ " str = str.."\n" for k, v in ...

  8. vue 和 react 学习 异同点

    vue 和 react 学习 异同点 本文不做两个框架比较,只对比了两个框架的语法对比,不代表任何观点,盗版必究,本人唯一qq:421217189 欢迎大家一起来学习探讨,壮我大前端(本文markdo ...

  9. 进程间通信 ipcs

    在linux系统上借助ipcs命令可以方便地查看进程间通信状态 操作系统:centos7.3 x86_64 应用软件: oracle12c

  10. 2.移植uboot-添加2440单板,并实现NOR、NAND启动

    上章分析了uboot启动流程后,接下来便来配置新的单板,实现nor.nand启动 1.首先在uboot里新建单板2440 : cd board/samsung/ cp smdk2410 smdk244 ...