Vue腳手架結構及vue-router路由配置

首先官網介紹，用 Vue.js + vue-router 創建單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合組件來組成應用程序，當你要把 vue-router 添加進來，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。

先介紹下Vue腳手架結構：

 在我們搭建vue環境之后，會生成一個文件夾，如圖

 

一級文件夾：

1：build :   主要是用來配置構建項目以及webpack。

2：config: 項目開發配置。

3：node_modules ：npm或者cnpm或者yarm所下載的依賴包。

4：src ： 你的源代碼。

5：static ： 靜態文件夾。

6：test ：測試，一般可以刪掉。

 

一級文件：

1： .babelrc

2:   .editorconfig

3:   .eslintignore

4:   .eslintrc

5:  文檔類型

6： .postcssrc.js

7:  index.html  ：最外層的頁面一般title等都設置在這里。

8: package.json  ：存放你要依賴包的json數據。

9:README.md

二級文件夾介紹：

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

 

assets：存放資源文件，例如css、js、image公共文件

components：存放公共組件，例如menu、tabBar、sideBar等組件

 

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

 

 

 

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

那么，結合了官網提供的例子，我們需要知道的幾個知識點是：

1.router-link組件是用來跳轉路由的，to屬性是將要跳轉的路由頁地址。

2.router-view組件是用來展示組件頁的。

3.編程式導航，也就是說通過js控制跳轉路由頁。

4.$route.query來獲取URL 查詢參數，例如你有一個路由地址：/detail?id=100，則有 let id= $route.query.id || -1，如果沒有查詢參數，則默認給了個-1的數值。

5.了解vue-router的history和hash兩種模式。

以上基本已經了解了vue-router的基礎知識，我們可以來動手實踐下了.

首先，創建兩個頁面組件：home.vue和about.vue.

 

然后，在router/index.js和home.vue和about.vue和app.vue完善下測試信息.

 

 

 

 

 以上就是我對於vue-router路由機制的了解.

WLJ