element-ui,router.push到其他路由,菜單欄不會高亮對應的路由
阿新 • • 發佈:2018-01-20
ati var ack pat 執行 post menu 並不會 self
使用餓了嗎的路由,使用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到其他路由,菜單欄不會高亮對應的路由