搭建vue環境之后，會生成一個文件夾，如圖
一級文件夾：
1.build：主要是用來配置構建項目以及webpack
2.config:項目開發配置
3.node_modules ：npm或者cnpm或者yarm所下載的依賴包。
4.src:你的源代碼
5.static:靜態文件夾
6test：測試，一般可以刪掉。
index.html ：最外層的頁面一般title等都設置在這里。
package.json ：存放你要依賴包的json數據。
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兩種模式。
首先，創建兩個頁面組件：home.vue和about.vue.
然后，在router/index.js和home.vue和about.vue和app.vue完善下測試信息.
以上就是我對於vue-router路由機制的了解.