在使用VUE開發的項目中，我們為了減少代碼冗余和方便后期維護，我們會將一些公共區域封裝為一個公共組件，需要時直接調用即可。但是相對于NavBar導航欄、Tabbar標簽欄幾乎每個頁面都需要使用的公共組件每次導入注冊較為麻煩，今天小千就來告訴大家一個好方法。

      一、效果介紹

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

      二、命名視圖

      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 是否顯示尤為方便。

      最后對前端開發感興趣的同學，可以了解一下千鋒教育web前端培訓班提供的web前端學習路線，包括HTML5、CSS3、JavaScript及其常用的擴展庫，能夠讓你對入門前端開發有一個清晰的認識，想要獲取前端完整學習路線和免費的學習資料可以添加我們的web前端技術分享交流qq群：857920838  加群找群管理領取即可，等你來哦~~