Vue2.0使用嵌套路由實(shí)現(xiàn)頁(yè)面內(nèi)容切換/公用一級(jí)菜單控制頁(yè)面內(nèi)容切換(推薦)
demo需求分析：
圖中菜單區(qū)域?yàn)閔eader公用組件，點(diǎn)擊相應(yīng)的菜單選項(xiàng)跳轉(zhuǎn)到對(duì)應(yīng)的路由，在菜單下區(qū)域加載相應(yīng)組件的內(nèi)容。
以下兩圖分別為點(diǎn)擊“我的電站”、“個(gè)人中心”的效果
demo結(jié)構(gòu)介紹：
登錄成功后，跳轉(zhuǎn)到index頁(yè)面，并默認(rèn)顯示index/UserStation（我的電站），index為一個(gè)組件，其他各個(gè)子菜單為一個(gè)組件，公共header為一個(gè)組件。
路由配置代碼：
header組件關(guān)鍵代碼:
基于Element-ui（只需要留意紅框部分）：Element-ui知識(shí)請(qǐng)參考Element-ui官網(wǎng)，handleSelect函數(shù)調(diào)用時(shí)，告知父組件props中的active已經(jīng)更新。
index.vue
解釋：index.vue中引用header組件，并向header組件傳入active，此active在子組件中需要被修改，因此需要使用.sync實(shí)現(xiàn)props在header組件與index組件中共享，.sync相關(guān)知識(shí)可查詢vuejs官網(wǎng)。
router-view用于掛載匹配到的路由組件（比如：UserStation的內(nèi)容）。
觀察active的變化，當(dāng)active變化時(shí)，push active的值到路由中，路由匹配到實(shí)現(xiàn)頁(yè)面切換。
注：登錄成功時(shí)this.$router.push('/Index/UserStation')，所以進(jìn)入index.vue時(shí)，默認(rèn)顯示我的電站菜單選項(xiàng)，路由默認(rèn)為Index/UserStation。
總結(jié)
以上所述是小編給大家介紹的Vue2.0使用嵌套路由實(shí)現(xiàn)頁(yè)面內(nèi)容切換/公用一級(jí)菜單控制頁(yè)面內(nèi)容切換(推薦),希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑
本文主要介紹了解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue實(shí)現(xiàn)定位并解決內(nèi)存泄漏
Vue.js?是一個(gè)流行且強(qiáng)大的?JavaScript?框架,它允許我們構(gòu)建動(dòng)態(tài)和交互式?Web?應(yīng)用程序,本文我們將深入探討?Vue.js?應(yīng)用程序中內(nèi)存泄漏的原因,并探索如何定位和修復(fù)這些問(wèn)題的有效策略,希望對(duì)大家有所幫助2023-09-09
今天小編就為大家分享一篇vue slots 組件的組合/分發(fā)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue?是如何將一份模板轉(zhuǎn)換為真實(shí)的?DOM?節(jié)點(diǎn)的,又是如何高效地更新這些節(jié)點(diǎn)的呢,這些都離不開虛擬dom這個(gè)概念,下面我們就來(lái)了解下虛擬dom這個(gè)概念以及它是什么吧2024-01-01
Vue使用babel-polyfill兼容IE解決白屏及語(yǔ)法報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了Vue使用babel-polyfill兼容IE解決白屏及語(yǔ)法報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3封裝全局Dialog組件的實(shí)現(xiàn)方法
3封裝全局Dialog組件相信大家都不陌生,下面這篇文章主要給大家介紹了關(guān)于Vue3封裝全局Dialog組件的實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue將對(duì)象新增的屬性添加到檢測(cè)序列的方法
下面小編就為大家分享一篇vue將對(duì)象新增的屬性添加到檢測(cè)序列的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了Vue修改Dom不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
深入解析el-col-group強(qiáng)大且靈活的Element表格列組件
這篇文章主要為大家介紹了el-col-group強(qiáng)大且靈活的Element表格列組件深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue中將el-switch值true、false改為number類型的1和0
這篇文章主要介紹了vue中將el-switch值true、false改為number類型的1和0問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10