情景

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="../assets/img/logo.png" alt="在Vue中實現隨hash改變響應選單高亮">
  <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 class="aaa" >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 選單高亮內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！