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= ...
随机推荐
- .NET 对 XML 进行创建,增加,删除,修改操作整理
前言: 最近做了一个项目,程序A在一个服务器程序B在另一台服务器,然而主程序A需要访问程序B的图片集文件夹下载到本服务器上,为了防止多次对Web Services进行调用,在主程序A中创建一个XML文 ...
- 【python】字符串
>>> str1="welcom to China">>> str1[2:4]'lc'>>> str1[7]'t'>&g ...
- TCP/IP----基本知识
就以这篇文章为起点,开始自己的学习计算机网络之路.这些仅是我个人之言,如有差错,希望读者能够逐一指出,在下不胜感激. 首先,我们需要知道一些关于网络的基本知识. 网络中的关系大多为拓扑结构.那么,何为 ...
- Sublime Text编辑器 + vim插件
Sublime安装 Sublime Text 是一个代码编辑器.Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim. Su ...
- jemeter——badboy导入的jmx文件自带元件解析
线程组设置与解析 含义:1秒启动100个线程,每个线程循环调用20次请求 (包括FTP请求.Java请求.http请求,根据你提交的请求而定) delay thread creation until ...
- 并行rsync
#!/bin/bash ]; then echo -e "usage : \n\t$0 hostList src_file dst_path" echo -e "exam ...
- Oracle数据库部分迁至闪存存储方案
Oracle数据库部分迁至闪存存储方案 1.实施需求 2.确认迁移表空间信息 3.确认redo信息 4.确认undo信息 5.表空间迁移到闪存 6.redo迁移到闪存 7.undo迁移到闪存 8.备库 ...
- scalajs_初体验
scalajs是将scala编译成js的编译器,目的在于使用scala的众多类库和强类型特征构建出稳定可扩展的js应用. build.sbt构建文件如下: enablePlugins(ScalaJSP ...
- c#程序连接mysql,报"Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLICIT) for operation '='"的解决方案
=============================================== 20170607_第一次修改 ccb_warlock === ...
- MySQL如何找到表与表之间的关系?
如何找到两张表之间的关系? 先站在左表的角度上去找,如果可以找到左表的多个字段可以对应右表的一个字段,那么左表的一个字段foregin key右表的一个字段.一般情况下为id... 2.如果右表的多个 ...