情景

Vue+Element 實現管理頁面菜單欄，

點擊菜單時 router 改變 hash 訪問不同子組件。

但是改變 hash 時菜單欄展開狀態和 highlight 并不會同步，

需要手動實現。

Try Try See

第一反應是通過 onhashchange 監聽 hash 的變化，

講 location.hash.slice(2) 推給 menu 的 default-active 即可。

此時通過手動輸入 url 或者前進后退時均可正常加載對應狀態，但是通過組件中的 link 訪問時，menu 的狀態沒有改變。

加入 alert 驗證發現沒有觸發 hashchange。

Why

Seafault 的解釋是

Vue-Router 底層調用的是 history.pushState

查閱 MDN 發現

注意 pushState() 絕對不會觸發 hashchange 事件，即使新的 URL 與舊的 URL 僅哈希不同也是如此。

Solution

Vue-Router 的文檔中給出兩個方案

watch $route 對象const User = { template: ’...’, watch: { $route(to, from) { // react to route changes... } }}

使用 beforeRouteUpdate

const User = { template: ’...’, beforeRouteUpdate(to, from, next) { // react to route changes... // don’t forget to call next() }}

另外

原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用。

知識點擴展

vue關于點擊菜單高亮與組件切換

有兩種

一種是 使用router-link 這種直接可以用router-link-active 來寫高亮樣式 組件在路由跳轉后 高亮依舊存在

一種是：is的應用了 點擊觸發事件 事件改變currentView的值 可以直接改掉 ：is 這個引入文件入口

<template> <div class='index'> <div class='headTop'></div> <div class='nav'> <img src='http://m.4tl426be.cn/assets/img/logo.png' alt=''> <el-row :gutter='20'> <el-col :span='3' @click.native='tabChange(’FirstScreen’)' ><div class='grid-content bg-purple'>首頁</div></el-col> <el-col :span='3' @click.native='tabChange(’pagetwo’)'><div class='grid-content bg-purple'>場站</div></el-col> <el-col :span='3' @click.native='tabChange(’pagethree’)' ><div class='grid-content bg-purple'>訂艙</div></el-col> </el-row> </div> <div :is='currentView'></div> <!-- <div >asdasd</div> --> </div> </template> <script>import FirstScreen from ’../views/containers/FirstScreen’import pagetwo from ’../views/containers/pagetwo’import pagethree from ’../views/containers/pagethree’ export default { name: ’index’, components:{ FirstScreen, pagetwo, pagethree }, data () { return { FirstScreen: ’FirstScreen’, pagetwo: ’pagetwo’, pagethree: ’pagethree’, currentView: ’FirstScreen’,//組建切換 activeIndex: ’1’, activeIndex2: ’1’, } }, computed:{ }, created(){ }, methods:{ tabChange(tabItem) { this.currentView = tabItem; console.log(this.currentView); } }}</script>

到此這篇關于在Vue中實現隨hash改變響應菜單高亮的文章就介紹到這了,更多相關vue 菜單高亮內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！