溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“如何使用vue-router命令視圖”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何使用vue-router命令視圖”吧!
一、效果介紹
話不多說開局一張圖，咱們先來上一張圖看看效果
二、命名視圖
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 是否顯示尤為方便。
到此，相信大家對“如何使用vue-router命令視圖”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
