现在就让我们打开router目录下的js文件。
import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import About from '@/components/about' import Recruit from '@/components/recruit' Vue.use(Router) export default new Router({ routes: [ { path: 'http://www.likecs.com/', name: 'Hello', component: Hello }, { path: '/about', name: 'about', component: About }, { path: '/recruit', name: 'recruit', component: Recruit } ] })前面先引入了路由插件vue-router，然后显式声明要用路由 Vue.use(Router) 。注意到Hello，About等都是页面（也可以是组件），接着注册路由器，然后开始配置路由。
路由的配置应该一目了然，给不同的path分配不同的页面（或组件，页面和组件其实是一样的概念），name参数不重要只是用来做识别用的。看到这里就可以明白，前面说的红色框的内容，其实就是Hello里面的内容，打开components目录下的Hello.vue就能明白了。
到这里就可以完成路由的配置，我个人习惯喜欢把页面放在pages目录下，组件放在components目录下，可能有人会问如果要访问:8080/#/about/me的话要如何配置呢，很简单只要给路由加多一个子路由配置，如下：
{ path: '/blog', name: 'blog', component: Blog, children: [ { path: 'http://www.likecs.com/', component: page1 }, { path: 'info', component: page2 } ] }访问/blog的时候会访问Blog页面，Blog里面放个路由器就可以了，然后访问:8080/#/blog/的时候会往路由容器中放置page1的内容，访问:8080/#/blog/info的时候会往路由容器中放置page2的内容
//blog.vue <template> <div>公用部分</div> <router-view></router-view> </template> 小结贯穿我们刚才学习的过程，从初始化到页面展示，Vue的页面架构流程大概是这样的
总结下前面讲的内容先：
搭建环境
代码逻辑
单页面组件（简单带过）
路由
子路由
以上的流程就是我们刚开始接触Vue时候的简单介绍，在之前就说过学习Vue能掌握组件和路由的基本概念之后，对于我们后续了解他的工作机制有着很大的帮助，本篇章我们只是简单介绍了单页面组件，在下一篇文章中，我们将通过一个实战的项目，来充分了解组件化在Vue构建中的重要性。
时间不早了，我也该回去睡觉了，消化一下，我们下一篇文章见~~~
文末附上所有相关代码和官方文档地址~~~
附件：
src.zip
问答
vue.js 怎么使用插件？
相关阅读
Vue.js 实战总结
Angular和Vue.js 深度对比
0基础菜鸟学前端之Vue.js
【每日课程推荐】机器学习实战！快速入门在线广告业务及CTR相应知识