在使用VUE開發(fā)的項(xiàng)目中，我們?yōu)榱藴p少代碼冗余和方便后期維護(hù)，我們會(huì)將一些公共區(qū)域封裝為一個(gè)公共組件，需要時(shí)直接調(diào)用即可。但是相對(duì)于NavBar導(dǎo)航欄、Tabbar標(biāo)簽欄幾乎每個(gè)頁面都需要使用的公共組件每次導(dǎo)入注冊(cè)較為麻煩，今天小千就來告訴大家一個(gè)好方法。

      一、效果介紹

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

      二、命名視圖

      2.1、介紹

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

      接著我們?cè)诙x路由時(shí)，將component 改為components 定義一個(gè)路由path 對(duì)應(yīng)n個(gè)同級(jí)組件，然后在對(duì)應(yīng)視圖區(qū)域顯示

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

      2.2、使用

      首先我們分部定義NavBar導(dǎo)航欄、Tabbar標(biāo)簽欄公共組件

      在vue庫學(xué)習(xí)中我們利用 Vue.component 來定義公共組件、在vuecli中我們利用 .vue 文件 ，這里我們按照的是路由簡寫定義公共組件。接著我們來定義路由匹配規(guī)則

      alias 是路由別名、components 多加了一個(gè) s 可以同時(shí)（同級(jí)）展示多個(gè)視圖，然后就是視圖區(qū)展示匹配的組件數(shù)據(jù)了

      完整代碼，各位小伙伴可以通過瀏覽器運(yùn)行查看效果啦(*￣︶￣)

      上述代碼的優(yōu)點(diǎn)，通過這一個(gè)html文件不足以看出，但是實(shí)戰(zhàn)開發(fā)中，利用.vue 文件封裝公組件，項(xiàng)目中需要導(dǎo)入、注冊(cè)才能使用時(shí)，你會(huì)發(fā)現(xiàn)直接通過命名視圖修改路由決定navbar 、tabbar 是否顯示尤為方便。

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