码迷,mamicode.com
首页 > 其他好文 > 详细

element-ui,router.push到其他路由,菜单栏不会高亮对应的路由

时间:2018-01-20 16:21:21      阅读:1979      评论:0      收藏:0      [点我收藏+]

标签:其他   router   image   高亮   def   bsp   gpo   图片   默认   

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

标签:其他   router   image   高亮   def   bsp   gpo   图片   默认   

原文地址:https://www.cnblogs.com/xuyan1/p/8320704.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!