在Vue中如何實現隨hash改變響應菜單高亮

這篇文章將為大家詳細講解有關在Vue中如何實現隨hash改變響應菜單高亮，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

情景

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="">
  <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改變響應菜單高亮”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。