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