溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“如何使用vue-router命令視圖”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“如何使用vue-router命令視圖”吧!
一、效果介紹
話不多說開局一張圖，咱們先來上一張圖看看效果
二、命名視圖
2.1、介紹
當(dāng)我們需要同時（同級）展示多個視圖，就可以利用vue-router中的命名視圖。通過下述命名視圖語法我們就可以輕松實現(xiàn)，當(dāng)一個路由path 匹配后，分別檢查是否需要在navbar、default、tabbar三個視圖區(qū)接著我們在定義路由時，將component 改為components 定義一個路由path 對應(yīng)n個同級組件，然后在對應(yīng)視圖區(qū)域顯示
感覺如何，是不是很簡單，知道概念和語法后，下面我們就一起來試試吧
2.2、使用
首先我們分部定義NavBar導(dǎo)航欄、Tabbar標(biāo)簽欄公共組件 在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 是否顯示尤為方便。
到此，相信大家對“如何使用vue-router命令視圖”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
