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

一、效果介紹

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

二、命名視圖

2.1、介紹

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

接著我們在定義路由時，將component 改為components 定義一個路由path 對應(yīng)n個同級組件，然后在對應(yīng)視圖區(qū)域顯示

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

2.2、使用

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

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

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

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

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

本文來自千鋒教育，轉(zhuǎn)載請注明出處。

總結(jié)

以上是生活随笔為你收集整理的前端技术分享：教你玩转vue-router命令视图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。