vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
本文将以示例的形式来介绍vue-router的各个特性，一共包含6个示例，每个示例都有乞丐版，前5个示例有皇帝版。
乞丐版是将所有代码混杂在一起的HTML页面，皇帝版是基于vue-webpack-simple模板构建的。
第一个单页面应用(01)
现在我们以一个简单的单页面应用开启vue-router之旅，这个单页面应用有两个路径：/home和/about，与这两个路径对应的是两个组件Home和About。
1. 创建组件
首先引入vue.js和vue-router.js：
<script src="https://www.jb51.net/js/vue.js"></script> <script src="https://www.jb51.net/js/vue-router.js"></script> 然后创建两个组件构造器Home和About： var Home = Vue.extend({ template: '<div><h1>Home</h1><p>{{msg}}</p></div>', data: function() { return { msg: 'Hello, vue router!' } } }) var About = Vue.extend({ template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>' })
2. 创建Router
var router = new VueRouter()
调用构造器VueRouter，创建一个路由器实例router。
3. 映射路由
router.map({ '/home': { component: Home }, '/about': { component: About } })
调用router的map方法映射路由，每条路由以key-value的形式存在，key是路径，value是组件。
例如：'/home'是一条路由的key，它表示路径；{component: Home}则表示该条路由映射的组件。
4. 使用v-link指令
<div> <a v-link="{ path: '/home'}">Home</a> <a v-link="{ path: '/about'}">About</a> </div>
在a元素上使用v-link指令跳转到指定路径。
5. 使用<router-view>标签
<router-view></router-view>
在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。
6. 启动路由
var App = Vue.extend({}) router.start(App, '#app')
路由器的运行需要一个根组件，router.start(App, '#app') 表示router会创建一个App实例，并且挂载到#app元素。
注意：使用vue-router的应用，不需要显式地创建Vue实例，而是调用start方法将根组件挂载到某个元素。
当你从GitHub上获取到最新的源代码后，如果想运行皇帝版，以demo01为例，在Git Bash下执行以下命令：
npm run demo01-dev
然后在浏览器中访问地址:8080
如果要编译和发布，请在Git Bash下执行以下命令：
npm run demo01-build
编写单页面的步骤
上面的6个步骤，可以说是创建一个单页面应用的基本步骤：
JavaScript
1.创建组件：创建单页面应用需要渲染的组件
2.创建路由：创建VueRouter实例
3.映射路由：调用VueRouter实例的map方法
4.启动路由：调用VueRouter实例的start方法
HTML
1.使用v-link指令
2.使用<router-view>标签
router.redirect
应用在首次运行时右侧是一片空白，应用通常都会有一个首页，例如：Home页。
使用router.redirect方法将根路径重定向到/home路径：
router.redirect({ 'https://www.jb51.net/': '/home' })
router.redirect方法用于为路由器定义全局的重定向规则，全局的重定向会在匹配当前路径之前执行。
执行过程
当用户点击v-link指令元素时，我们可以大致猜想一下这中间发生了什么事情：
vue-router首先会去查找v-link指令的路由映射
然后根据路由映射找到匹配的组件
最后将组件渲染到<router-view>标签
嵌套路由(02)