一.什么是vue-router
vue-router路由插件，这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。
二.vue-router安装
安装vue-router
vue-router是一个插件包，所以我们还是需要用npm或cnpm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。
npm install vue-router --save-dev解读router/index.js文件
我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称，
component: Hello //对应的组件模板
}
]
})上边的代码中已经对每行都进行了注释，其实在这个路由文件里只配置了一个功能，就是在进入项目时，显示Hello.vue里边的内容代码。
三.vue-router路由配置（一级路由）
1.新建details.vue/sort.vue/mine.vue文件，具体写法如下
2.App.vue文件
3.index.js文件（路由配置文件）
效果如图：
四.vue-router路由配置（二级路由）
1.新建login.vue/register.vue两个文件
2.在首页的组件下编写router-link路径
3.配置路由，二级路由用children属性实现，注意：二级路由路径不用写"/","/"表示找子路径，这里直接写组件名称即可。
五.单页面多路由区域操作
“单页面多路由区域操作”，实际需求是这样的，在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。也就是不同的router-view对应不同的组件。便于样式设置。如图：我想在Helloworld文件下，让<router-view name="left"></router-view>对应登录组件，让<router-view name="right"></router-view>对应注册组件。
在index.js文件下配置路由文件
