這篇文章將為大家詳細(xì)講解有關(guān)在Vue中如何實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。
情景
Vue+Element 實(shí)現(xiàn)管理頁面菜單欄，
點(diǎn)擊菜單時(shí) router 改變 hash 訪問不同子組件。
但是改變 hash 時(shí)菜單欄展開狀態(tài)和 highlight 并不會(huì)同步，
需要手動(dòng)實(shí)現(xiàn)。
Try Try See
第一反應(yīng)是通過 onhashchange 監(jiān)聽 hash 的變化，
講 location.hash.slice(2) 推給 menu 的 default-active 即可。
此時(shí)通過手動(dòng)輸入 url 或者前進(jìn)后退時(shí)均可正常加載對(duì)應(yīng)狀態(tài)，但是通過組件中的 link 訪問時(shí)，menu 的狀態(tài)沒有改變。
加入 alert 驗(yàn)證發(fā)現(xiàn)沒有觸發(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()
}
}另外
原來的組件實(shí)例會(huì)被復(fù)用。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。
知識(shí)點(diǎn)擴(kuò)展
vue關(guān)于點(diǎn)擊菜單高亮與組件切換
有兩種
一種是 使用router-link 這種直接可以用router-link-active 來寫高亮樣式 組件在路由跳轉(zhuǎn)后 高亮依舊存在
一種是：is的應(yīng)用了 點(diǎn)擊觸發(fā)事件 事件改變currentView的值 可以直接改掉 ：is 這個(gè)引入文件入口
