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

成都創(chuàng)新互聯(lián)專業(yè)成都做網(wǎng)站、網(wǎng)站制作，集網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營銷、軟文發(fā)布平臺(tái)等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計(jì)，讓網(wǎng)站在運(yùn)行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計(jì)制作為您帶來效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

首先在大前提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ò)，如下圖

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

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

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

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)，我們一起看看它頁面的源碼吧！

先從這個(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格式

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

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

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

簡單介紹一下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)寫上

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

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

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

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

然后配置HelloWorld.vue的子路由

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

這樣簡單路由嵌套就完成，在說說路由跳轉(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ò)，可以把它分享出去讓更多的人看到。