vue從建立到完整的餓了麼（2）路由

說明

1. 上一篇地址--建立
2. 蒼渡大神Github項目源碼地址--源碼地址
3. 下一篇地址--引入UI框架

home.vue 建立

1. 根據源碼，先在src文件夾下新建文件夾page，在page中新建home文件夾，在home文件夾中新建home.vue，home.vue代碼如圖
2. template中寫html，script中寫js，style中寫css，style scoped的意思是css樣式只在本頁面使用
3. 頁面內容先就寫這麼多，可是頁面怎麼顯示呢？打開App.vue，修改如圖
4. 頁面會顯示在<router-view></router-view>裏，一個頁面能夠用幾個<router-view></router-view>我也不會等用到再說，如今的問題是怎麼讓<router-view></router-view>知道顯示我們的home.vue呢？

router路由建立

1. 用vue-router來控制顯示哪一個頁面（我也不會邊學邊用，官方文檔在此），使用的話先引用到vue裏（上一章的建立時候用npm已經下載了），這裏能夠直接使用。
2. 首先在src下建立router文件夾，在router下建立routers.js文件，全部的路由控制都寫在這個文件裏。
3. 看了一下源碼的路由，看得我頭皮發麻，算了先本身寫寫看，es6等之後再學。routers.js頁面代碼
   8. 輸出一個數組，數組裏有一個對象（由於全部的頁面都掛在App.vue裏因此只有一個對象，這是我目前的理解）。path表示路徑，component表示顯示的頁面（要顯示哪一個xxx.vue文件），children表示的嵌套的路由。路由先寫這麼多，可是輸出路由了誰來執行呢？打開main.js文件。

4. 由於要用路由模塊和本身寫的routers.js文件，因此先引進來

   import VueRouter from 'vue-router'
   import routes from './router/routers'
   Vue.use(VueRouter)

5. 根據官網的例子新建一個VueRouter掛到vue下

   const router = new VueRouter({
       routes
   })

6. 最終main.js修改以下
7. 用cmd運行試試，彈出如下頁面ok，運行成功，接下來應該寫頁面了吧？