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