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,结束。

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

时间: 2024-10-13 22:54:59

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

Angularjs中UI Router用法小记录

今天自己参考已有的项目代码学习了下UI Router的用法,写了个小demo,验证了下自己的想法,现把使用情况记录一下. 1.入口文件index.html,引入项目所需的js文件,标注ng-app,创建ui-view元素,为后面的嵌套做容器准备. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8">

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

本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单.这项技术可以用在你想要简化用户操作的大表单上. 我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Rout

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

不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p>Element UI简单Cascader级联选择器使用</p> <el-cascader :options='options' v-model="selectedOptions" @change="handleChange"> </el-

vue+vuex+router+element ui

1. cnpm install -g vue-cli 项目的main.js引入import Vue from 'vue' 2. 创建项目 vue init webpack +项目名称 3.  cnpm install ----->下载依赖文件 npm run dev ----->运行项目 4.config文件夹,下面的index.js里面修改port端口号 /////////////////////////////////////// 好像vue 在2.0之后自动的就引入了router和vue

【转】Vue-详解设置路由导航的两种方法: &lt;router-link :to=&quot;...&quot;&gt; 和router.push(...)

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

Vue-详解设置路由导航的两种方法: &lt;router-link :to=&quot;...&quot;&gt; 和router.push(...)

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

vue中this.$router.push()路由传值和获取的两种常见方法

1.路由传值   this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的URL (2)当点击 <router-link> 时,这个方法会在内部调用,即点击 <router-link :to="..."> 等同于调用 router.push(...) a)      声明式:<router-link :to=&quo

vue模块化(echart+element ui)

最近看了下vue的框架,随手做了个项目,记录分享下 技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图 主要是配置的是npm 打包命令 和引入vue-route vue的路由文件 和element ui 文件 下面这个是 引入echart.js 文件, 基本资料就这些. 首先我们开始构建一个vue-cli项目 1.首先node环境(这里就不多啰嗦了) 2.执行vue-cli命令 npm install --gl

Angularjs中UI Router全攻略

摘自:Angularjs中UI Router全攻略 温馨提示:想要了解 angular-ui-router的同学,从上往下读一遍,能带随着coding那就更好了,保证你对angular-ui-router基本全部掌握. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofi