承接上文:Vue實戰——路由的導航守衛與從背景擷取資料,繼續我們的繼續我們的實戰之旅,本項目Gitee位址:
https://gitee.com/vuejslearn/news-list.git
當我們啟動項目後,發現首頁有導航欄:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5CM3MzNxQjN0EjNyATM2M2MlJjN4EmN4IWY0UTZwYmYl9CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
首頁的導航欄
然後我們點選newAbout,發現依然有導航欄:
newAbout頁面
如果我們的項目中需要在一些頁面中不顯示導航欄,該怎麼做呢?很簡單,我們利用Router的元資訊添加一個标志位,然後在主路由上對它動态的判斷就可以了,具體的辦法是:
編輯路由的配置檔案:
路由配置檔案
在每個路由裡,添加
meta: { showHeader: true }
首頁路由為true,其餘的路由頁面為false,具體clone代碼後可以檢視。然後在app.vue的主路由上對其判斷:
Home | AboutnewAbout
我們添加了
v-show="$route.meta.showHeader"
每次在挂載元件後,對其做判斷,如果為false,就不顯示了。這極大的友善了我們涉及我們的元件,後期我們會根據這個做新聞詳情頁。
現在我們重新開機項目發現,首頁還有路由,但是newAbout頁已經沒有路由了。
原創不容易,鑒于本人水準有限,文中如有錯誤之處歡迎大家指正。以後我會持續釋出vue實戰系列的文檔,喜歡的朋友歡迎關注。