首頁  >  文章  >  web前端  >  如何對vue鷹架及vue-router進行使用

如何對vue鷹架及vue-router進行使用

php中世界最好的语言
php中世界最好的语言原創
2018-05-25 14:59:051140瀏覽

這次帶給大家怎樣對vue鷹架及vue-router進行使用,對vue腳手架及vue-router進行使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

首先在大前提vue-cli已經安裝好的情況下,並且cnpm install後(官網使用的是npm,但這裡推薦用cnpm比npm快而且npm有時會有出現卡住的現象),這裡有個小提醒就是關於是否開啟eslint,這個是對你寫的代碼進行規範化的一個工具,對於剛接觸的新手們建議關閉,不然代碼寫的不符合它的規範你的編譯器會一直報錯,如下圖

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

終端輸入npm run dev,然後打開localhost:8080就可以看到項目運行啦

大致分析幾個比較常用的文件把,如下圖

1.build:主要用來設定建置專案以及webpack

2.config:專案開發配置

3.npm或cnpm下載的依賴套件

4.你的原始碼

5.靜態資料夾,webpack打包時不會打包這裡檔案

6.最外層的頁面一般title等都設定在這裡

7.存放你要npm依賴套件的json資料

大約介紹完專案結構,我們一起看看它頁面的原始碼吧!

先從這個App.vue開始,這個檔案僅此於外部的index意思就是index包含所有頁面,而App.vue包含除了index的頁面,也就是路由嵌套,後面會說到,在這裡所創建的文件都是文件名.vue,頁面的html格式就是一個template標籤中包含一個p,相當於組件化的形式,而組件的內容寫在這個p中(一個頁面必須只有一個template套件一個p,內容寫在這個p中,不然會報錯),而這個router-view標籤就是當前頁面下的子頁面,可以理解成這個router-view是另一個頁面,被目前頁面所包含著,有點類似ifame標籤的功能。

css,js格式

現在我們來看看HelloWorld.vue這個頁面,這裡js,css的程式碼放置格式它已經幫你寫出來了,按照這種格式寫就行了,需要提醒的就是style標籤中的scoped屬性,如果沒寫這條那麼這個style的樣式會影響到這個頁面所有的子路由,如果加了那麼這個樣式只對當前頁面起作用

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

#路由的路徑在router下,剛開始打開會看到有報錯,其實不是語法錯誤,是因為編譯器預設編譯es5的語法,而vue腳手架用的是es6的語法,我用的編譯器是webStorm,只要設定一下就好了。

簡單介紹一下routers中的結構,這裡主要用來配置路由的,上面說過所有子路由都在App.vue下,所有App.vue是最外層的父路由,這裡的routes中存的就是路由的數組,path就是你要訪問你所創建的頁面的路徑,這裡寫的是根路徑序列所以你直接訪問localhost:8080就會出現一個App.vue中插入一個HelloWorld.vue的頁面(這個相當於路由嵌套),name想到與給它命名這個比較無關緊要,component相當於你要引用的頁面,這裡引用的是HelloWorld.vue這個頁面,主要上面的import,這裡的HelloWorld是一個變量,對應上面的路徑文件

現在教大家創建一個文件,並配置路由

先創建一個後綴為vue文件,並把最基本的html結構寫上

然後設定它的路由,先引入這個檔案用import,然後填寫要存取這個檔案的路徑我用/test,所有要開啟這個路由就輸入localhost:8080/#/test,在本引入的檔案拿到component中

輸入url,一個APP.vue中嵌套test.vue的頁面就呈現了

vue腳手架預設的路由嵌套就是所有頁面都嵌套在App.vue頁面下,現在教大家自由嵌套自己的頁面現在我把test頁面嵌套到HelloWorld.vue頁面下

先在HelloWorld.vue介面下加上一個router-view標籤

#然後設定HelloWorld.vue的子路由

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

##這樣簡單路由嵌套就完成,在說說路由跳轉,例如你給一個按鈕綁定一個函數,實現點擊按鈕跳到test頁面那在函數中可以用

this.$router.push({path:'/test'})
如果要回到上一個頁面用

this.$router.go(-1)
大致內容就是這些,如果有哪裡說錯或遺憾還望多多包涵,或是聯絡我,大家多交流交流!

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀

怎麼處理JS中雙擊和點擊事件衝突問題

在Vue裡CSS Modules優雅使用方法

以上是如何對vue鷹架及vue-router進行使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn