溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何在vue中使用vue-router

發(fā)布時(shí)間:2021-03-29 15:38:16 來源:億速云 閱讀:274 作者:Leah 欄目:web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)如何在vue中使用vue-router,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

首先在大前提vue-cli已經(jīng)安裝好的情況下,并且cnpm install后(官網(wǎng)使用的是npm,但這里推薦用cnpm比npm快而且npm有時(shí)候會(huì)有出現(xiàn)卡住的現(xiàn)象),這里有個(gè)小提醒就是關(guān)于是否開啟eslint,這個(gè)是對(duì)你寫的代碼進(jìn)行規(guī)范化的一個(gè)工具,對(duì)于剛接觸的新手們建議關(guān)閉,不然代碼寫的不符合它的規(guī)范你的編譯器會(huì)一直報(bào)錯(cuò),如下圖

如何在vue中使用vue-router

安裝好腳手架之后就像這樣

如何在vue中使用vue-router

終端輸入npm run dev,然后打開localhost:8080就可以看到項(xiàng)目運(yùn)行啦

如何在vue中使用vue-router

大致分析一下幾個(gè)比較常用的文件把,如下圖

如何在vue中使用vue-router

1.build:主要用來配置構(gòu)建項(xiàng)目以及webpack

2.config:項(xiàng)目開發(fā)配置

3.npm或者cnpm所下載的依賴包

4.你的源代碼

5.靜態(tài)文件夾,webpack打包時(shí)不會(huì)打包這里文件

6.最外層的頁面一般title等都設(shè)置在這里

7.存放你要npm依賴包的json數(shù)據(jù)

大致介紹完項(xiàng)目結(jié)構(gòu),我們一起看看它頁面的源碼吧!

如何在vue中使用vue-router

先從這個(gè)App.vue開始,這個(gè)文件僅此于外部的index意思就是index包含所有頁面,而App.vue包含除了index的頁面,也就是路由嵌套,后面會(huì)說到,在這里所創(chuàng)建的文件都是文件名.vue,頁面的html格式就是一個(gè)template標(biāo)簽中包含一個(gè)div,相當(dāng)于組件化的形式,而組件的內(nèi)容寫在這個(gè)div中(一個(gè)頁面必須只有一個(gè)template包一個(gè)div,內(nèi)容寫在這個(gè)div中,不然會(huì)報(bào)錯(cuò)),而這個(gè)router-view標(biāo)簽就是當(dāng)前頁面下的子頁面,可以理解成這個(gè)router-view是另一個(gè)頁面,被當(dāng)前頁面所包含著,有點(diǎn)類似ifame標(biāo)簽的功能。

css,js格式

如何在vue中使用vue-router

現(xiàn)在我們來看看HelloWorld.vue這個(gè)頁面,這里js,css的代碼放置格式它已經(jīng)幫你寫出來了,按照這種格式寫就行了,需要提醒的就是style標(biāo)簽中的scoped屬性,如果沒寫這條那么這個(gè)style的樣式會(huì)影響到這個(gè)頁面所有的子路由,如果加了那么這個(gè)樣式只對(duì)當(dāng)前頁面起作用

看完頁面我們看看路由的配置如下圖

如何在vue中使用vue-router

路由的路徑在router下,剛開始打開會(huì)看到有報(bào)錯(cuò),其實(shí)不是語法錯(cuò)誤,是因?yàn)榫幾g器默認(rèn)編譯es5的語法,而vue腳手架用的是es6的語法,我用的編譯器是webStorm,只要設(shè)置一下就行了。

如何在vue中使用vue-router

如何在vue中使用vue-router

簡(jiǎn)單介紹一下routers中的結(jié)構(gòu),這里主要用來配置路由的,上面說過所有子路由都在App.vue下,所有App.vue是最外層的父路由,這里的routes中存的就是路由的數(shù)組,path就是你要訪問你所創(chuàng)建的頁面的路徑,這里寫的是根路徑序所以你直接訪問localhost:8080就會(huì)出現(xiàn)一個(gè)App.vue中插入一個(gè)HelloWorld.vue的頁面(這個(gè)相當(dāng)于路由嵌套),name想到與給它命名這個(gè)比較無關(guān)緊要,component相當(dāng)于你要引用的頁面,這里引用的是HelloWorld.vue這個(gè)頁面,主要上面的import,這里的HelloWorld是一個(gè)變量,對(duì)應(yīng)上面的路徑文件

現(xiàn)在教大家創(chuàng)建一個(gè)文件,并配置路由

先創(chuàng)建一個(gè)后綴為vue文件,并把最基本的html結(jié)構(gòu)寫上

如何在vue中使用vue-router

然后配置它的路由,先引入這個(gè)文件用import,然后填寫要訪問這個(gè)文件的路徑我用/test,所有要打開這個(gè)路由就輸入localhost:8080/#/test,在本引入的文件拿到component中

如何在vue中使用vue-router

輸入url,一個(gè)APP.vue中嵌套test.vue的頁面就呈現(xiàn)了

如何在vue中使用vue-router

vue腳手架默認(rèn)的路由嵌套就是所有頁面都嵌套在App.vue頁面下,現(xiàn)在教大家自由嵌套自己的頁面現(xiàn)在我把test頁面嵌套到HelloWorld.vue頁面下

首先在HelloWorld.vue界面下加一個(gè)router-view標(biāo)簽

如何在vue中使用vue-router

然后配置HelloWorld.vue的子路由

如何在vue中使用vue-router

這樣localhost:8080/#/test就是一個(gè)APP.vue嵌套HelloWorld.vue在嵌套test.vue的頁面了如下圖

如何在vue中使用vue-router

這樣簡(jiǎn)單路由嵌套就完成,在說說路由跳轉(zhuǎn),比如你給一個(gè)按鈕綁定一個(gè)函數(shù),實(shí)現(xiàn)點(diǎn)擊按鈕跳轉(zhuǎn)到test頁面那在函數(shù)中可以用

this.$router.push({path:'/test'})

如果要回到上一個(gè)頁面用

this.$router.go(-1)

關(guān)于如何在vue中使用vue-router就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI