Vue2.0使用嵌套路由實(shí)現(xiàn)頁面內(nèi)容切換/公用一級菜單控制頁面內(nèi)容切換(推薦)
demo需求分析：
圖中菜單區(qū)域?yàn)閔eader公用組件，點(diǎn)擊相應(yīng)的菜單選項(xiàng)跳轉(zhuǎn)到對應(yīng)的路由，在菜單下區(qū)域加載相應(yīng)組件的內(nèi)容。
以下兩圖分別為點(diǎn)擊“我的電站”、“個人中心”的效果
demo結(jié)構(gòu)介紹：
登錄成功后，跳轉(zhuǎn)到index頁面，并默認(rèn)顯示index/UserStation（我的電站），index為一個組件，其他各個子菜單為一個組件，公共header為一個組件。
路由配置代碼：
header組件關(guān)鍵代碼:
基于Element-ui（只需要留意紅框部分）：Element-ui知識請參考Element-ui官網(wǎng)，handleSelect函數(shù)調(diào)用時，告知父組件props中的active已經(jīng)更新。
index.vue
解釋：index.vue中引用header組件，并向header組件傳入active，此active在子組件中需要被修改，因此需要使用.sync實(shí)現(xiàn)props在header組件與index組件中共享，.sync相關(guān)知識可查詢vuejs官網(wǎng)。
router-view用于掛載匹配到的路由組件（比如：UserStation的內(nèi)容）。
觀察active的變化，當(dāng)active變化時，push active的值到路由中，路由匹配到實(shí)現(xiàn)頁面切換。
注：登錄成功時this.$router.push('/Index/UserStation')，所以進(jìn)入index.vue時，默認(rèn)顯示我的電站菜單選項(xiàng)，路由默認(rèn)為Index/UserStation。
總結(jié)
以上所述是小編給大家介紹的Vue2.0使用嵌套路由實(shí)現(xiàn)頁面內(nèi)容切換/公用一級菜單控制頁面內(nèi)容切換(推薦),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
紅包也叫壓歲錢，是過農(nóng)歷春節(jié)時長輩給小孩兒用紅紙包裹的禮金。本文將通過Vue制作一個紅包雨小游戲，文中的示例代碼講解詳細(xì)，需要的可以參考一下2022-01-01
vue進(jìn)行下載與處理二進(jìn)制流文件的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)將后端返回的二進(jìn)制流進(jìn)行處理并實(shí)現(xiàn)下載,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
純前端使用Vue3上傳文件到minio文件服務(wù)器(粘貼可直接用)
vue是目前最流行的前端框架,下面這篇文章主要給大家介紹了關(guān)于純前端使用Vue3上傳文件到minio文件服務(wù)器的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
vue中的Object.freeze()?優(yōu)化數(shù)據(jù)方式
這篇文章主要介紹了vue中的Object.freeze()優(yōu)化數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了詳解Vue中watch對象內(nèi)屬性的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vue預(yù)覽本地pdf文件方法之vue-pdf組件使用
這篇文章主要介紹了vue預(yù)覽本地pdf文件方法之vue-pdf組件使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在使用Vue.js進(jìn)行前端開發(fā)的過程中,Element?UI?是一個非常流行的UI庫,它提供了一套完整的組件來快速搭建美觀的用戶界面,但是我們經(jīng)常遇到一個問題使用Element?UI提供的el-date-picker組件時,嘗試自定義其樣式卻無法生效,所以本文給大家介紹如何解決這個問題2024-10-10
Vue.use()主要用于注冊全局插件,當(dāng)插件具有install方法時,調(diào)用Vue.use()可以全局使用該插件,Vue.prototype用于注冊全局變量,這些變量在項(xiàng)目任何位置都可以通過this.$變量名訪問,兩者的主要區(qū)別在于Vue.use()用于插件,Vue.prototype用于變量2024-10-10
vue基礎(chǔ)之事件簡寫、事件對象、冒泡、默認(rèn)行為、鍵盤事件實(shí)例分析
這篇文章主要介紹了vue基礎(chǔ)之事件簡寫、事件對象、冒泡、默認(rèn)行為、鍵盤事件,結(jié)合實(shí)例形式分析了vue.js事件簡寫、冒泡及阻止冒泡等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
前端vue中實(shí)現(xiàn)嵌入代碼編輯器的詳細(xì)代碼
隨著Web技術(shù)的不斷發(fā)展,前端開發(fā)也正日新月異,下面這篇文章主要給大家介紹了關(guān)于前端vue中實(shí)現(xiàn)嵌入代碼編輯器的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07