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，运行成功，接下来应该写页面了吧？