在VUE實戰項目開發中，為了減少代碼冗余，便于后期維護，我們經常會把相同布局的代碼封裝為公共組件，例如移動開發中NavBar導航欄、Tabbar標簽欄等公共組件，需要使用時導入、注冊、調用即可，但是相對NavBar導航欄、Tabbar標簽欄幾乎每個頁面都需要使用的公共組件每次導入注冊較為麻煩，有沒有更好的解決方案呢，接下來通過本篇文章來教你vue-router命令視圖應該怎么玩。

　　一、效果介紹

　　話不多說開局一張圖，咱們先來上一張圖看看效果

　　那激動人心的時刻到了，我們如何使用vue-router命令視圖呢？

　　二、命名視圖

　　2.1、介紹

　　當我們需要同時(同級)展示多個視圖，就可以利用vue-router中的命名視圖。通過下述命名視圖語法我們就可以輕松實現，當一個路由path 匹配后，分別檢查是否需要在navbar、default、tabbar三個視圖區展示

　　接著我們在定義路由時，將component 改為components 定義一個路由path 對應n個同級組件，然后在對應

　　視圖區域顯示

　　感覺如何，是不是很簡單，知道概念和語法后，下面我們就一起來試試吧

　　2.2、使用

　　首先我們分部定義NavBar導航欄、Tabbar標簽欄公共組件

　　在vue庫學習中我們利用 Vue.component 來定義公共組件、在vuecli中我們利用 .vue 文件 ，這里我們按照的是路由簡寫定義公共組件。

　　接著我們來定義路由匹配規則

　　alias 是路由別名、components 多加了一個 s 可以同時(同級)展示多個視圖

　　然后就是視圖區展示匹配的組件數據了

　　完整代碼，各位小伙伴可以通過瀏覽器運行查看效果啦

　　上述代碼的優點，通過這一個html文件不足以看出，但是實戰開發中，利用.vue 文件封裝公組件，項目中需要導入、注冊才能使用時，你會發現直接通過命名視圖修改路由決定navbar 、tabbar 是否顯示尤為方便。

　　更多關于“前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學，課程大綱緊跟企業需求，更科學更嚴謹，每年培養泛IT人才近2萬人。不論你是零基礎還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。