一区二区三区中文国产亚洲_另类视频区第一页_日韩精品免费视频_女人免费视频_国产综合精品久久亚洲

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > web前端技巧|教你玩轉(zhuǎn)vue-router命令視圖

web前端技巧|教你玩轉(zhuǎn)vue-router命令視圖

來(lái)源:千鋒教育
發(fā)布人:小千
時(shí)間: 2021-04-09 09:00:00 1617930000

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

      一、效果介紹

      話不多說(shuō)開(kāi)局一張圖,咱們先來(lái)上一張圖看看效果

1

      二、命名視圖

      2.1、介紹

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

2

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

3

      感覺(jué)如何,是不是很簡(jiǎn)單,知道概念和語(yǔ)法后,下面我們就一起來(lái)試試吧

      2.2、使用

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

4

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

5

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

6

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

7

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

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

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
C++的traits技術(shù)到底是什么?

在C++編程中,traits是一種編程技巧,其主要目的是在編譯時(shí)提供關(guān)于類型的額外信息。它可以將類型的一些特性(如其關(guān)聯(lián)類型、屬性、函數(shù)等)抽...詳情>>

2023-10-14 03:00:03
汽車行業(yè)什么工作會(huì)用到MATLAB?

MATLAB在汽車行業(yè)的應(yīng)用MATLAB是一種用于算法開(kāi)發(fā)、數(shù)據(jù)可視化、數(shù)據(jù)分析和數(shù)值計(jì)算的高級(jí)語(yǔ)言和交互式環(huán)境。在汽車行業(yè)中,MATLAB的應(yīng)用非常廣...詳情>>

2023-10-14 02:45:08
紅帽RHEL8和7有什么區(qū)別?

一、軟件包管理器的區(qū)別軟件包管理器是操作系統(tǒng)中管理軟件包的工具,RHEL 8和7在軟件包管理器方面有一些重要的區(qū)別:RHEL 8采用了新的軟件包管...詳情>>

2023-10-14 02:41:24
什么是軟件即服務(wù)(SaaS)?

一、軟件即服務(wù)(SaaS)的定義軟件即服務(wù)(SaaS)是一種基于云計(jì)算的軟件交付模式,用戶可以通過(guò)訂閱或按需使用這些應(yīng)用程序。在傳統(tǒng)模式下,軟...詳情>>

2023-10-14 02:39:43
oracle怎么樣實(shí)現(xiàn)數(shù)據(jù)庫(kù)跨機(jī)房同步?

一、oracle怎么樣實(shí)現(xiàn)數(shù)據(jù)庫(kù)跨機(jī)房同步除了使用第三方工具,Oracle提供了extended cluster可以實(shí)現(xiàn)類似的功能,使用Oracle RAC + ASM。簡(jiǎn)單說(shuō)下...詳情>>

2023-10-14 01:57:43
快速通道