天天看點

vue 根據背景資料 判斷顯示_Vue實戰——利用路由元資訊隐藏頁面跳轉後的主路由...

承接上文:Vue實戰——路由的導航守衛與從背景擷取資料,繼續我們的繼續我們的實戰之旅,本項目Gitee位址:

https://gitee.com/vuejslearn/news-list.git           

當我們啟動項目後,發現首頁有導航欄:

vue 根據背景資料 判斷顯示_Vue實戰——利用路由元資訊隐藏頁面跳轉後的主路由...

首頁的導航欄

然後我們點選newAbout,發現依然有導航欄:

vue 根據背景資料 判斷顯示_Vue實戰——利用路由元資訊隐藏頁面跳轉後的主路由...

newAbout頁面

如果我們的項目中需要在一些頁面中不顯示導航欄,該怎麼做呢?很簡單,我們利用Router的元資訊添加一個标志位,然後在主路由上對它動态的判斷就可以了,具體的辦法是:

編輯路由的配置檔案:

vue 根據背景資料 判斷顯示_Vue實戰——利用路由元資訊隐藏頁面跳轉後的主路由...

路由配置檔案

在每個路由裡,添加

meta: { showHeader: true }           

首頁路由為true,其餘的路由頁面為false,具體clone代碼後可以檢視。然後在app.vue的主路由上對其判斷:

Home | AboutnewAbout

我們添加了

v-show="$route.meta.showHeader"           

每次在挂載元件後,對其做判斷,如果為false,就不顯示了。這極大的友善了我們涉及我們的元件,後期我們會根據這個做新聞詳情頁。

現在我們重新開機項目發現,首頁還有路由,但是newAbout頁已經沒有路由了。

vue 根據背景資料 判斷顯示_Vue實戰——利用路由元資訊隐藏頁面跳轉後的主路由...

原創不容易,鑒于本人水準有限,文中如有錯誤之處歡迎大家指正。以後我會持續釋出vue實戰系列的文檔,喜歡的朋友歡迎關注。

繼續閱讀