這篇文章將為大家詳細(xì)講解有關(guān)在Vue中如何實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

站在用戶(hù)的角度思考問(wèn)題，與客戶(hù)深入溝通，找到德安網(wǎng)站設(shè)計(jì)與德安網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品，建站類(lèi)型包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國(guó)際域名空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋德安地區(qū)。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

情景

Vue+Element 實(shí)現(xiàn)管理頁(yè)面菜單欄，

點(diǎn)擊菜單時(shí) router 改變 hash 訪問(wèn)不同子組件。

但是改變 hash 時(shí)菜單欄展開(kāi)狀態(tài)和 highlight 并不會(huì)同步，

需要手動(dòng)實(shí)現(xiàn)。

Try Try See

第一反應(yīng)是通過(guò) onhashchange 監(jiān)聽(tīng) hash 的變化，

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

此時(shí)通過(guò)手動(dòng)輸入 url 或者前進(jìn)后退時(shí)均可正常加載對(duì)應(yīng)狀態(tài)，但是通過(guò)組件中的 link 訪問(wèn)時(shí)，menu 的狀態(tài)沒(méi)有改變。

加入 alert 驗(yàn)證發(fā)現(xiàn)沒(méi)有觸發(fā) hashchange。

Why

Seafault 的解釋是

• Vue-Router 底層調(diào)用的是 history.pushState

查閱 MDN 發(fā)現(xiàn)

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

Solution

Vue-Router 的文檔中給出兩個(gè)方案

watch $route 對(duì)象
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()
 }
}

另外

原來(lái)的組件實(shí)例會(huì)被復(fù)用。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件，比起銷(xiāo)毀再創(chuàng)建，復(fù)用則顯得更加高效。不過(guò)，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。

知識(shí)點(diǎn)擴(kuò)展

vue關(guān)于點(diǎn)擊菜單高亮與組件切換

有兩種

一種是 使用router-link 這種直接可以用router-link-active 來(lái)寫(xiě)高亮樣式   組件在路由跳轉(zhuǎn)后 高亮依舊存在

一種是：is的應(yīng)用了     點(diǎn)擊觸發(fā)事件 事件改變currentView的值 可以直接改掉  ：is  這個(gè)引入文件入口

<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">首頁(yè)</div></el-col>
  <el-col :span="3" @click.native="tabChange('pagetwo')"><div class="grid-content bg-purple">場(chǎng)站</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>

關(guān)于“在Vue中如何實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：在Vue中如何實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮-創(chuàng)新互聯(lián)
URL鏈接：http://www.aaarwkj.com/article36/gpdpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、小程序開(kāi)發(fā)、軟件開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、面包屑導(dǎo)航、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)