前端技術分享：教你玩轉vue-router命令檢視

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