说明：
我们项目现在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3
如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。
本文是一系列文章，在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。
1.Vue.js系列之项目搭建（1）
2.Vue.js系列之项目结构说明（2）
概述
Vue非常适用于实践单页面应用程序也就是平时大家说的比较多的SPA（single page application），这点应该了解过Vue的应该都知道吧。一般的单页面应用是基于路由或页面之间的链接来形成的，Vue是基于路由和组件的，所以我们今天就来了解下vue-router。vue-router是Vue.js官方的路由插件，它和vue.js深度集成，用于设定访问路径，并将路径和组件映射起来，我们给每个组件一个路由地址，跳转路由相当于组件切换。vue-router的内容还是比较多的，这里我只分享我自己项目中用到的地方，其他地方大家可以看文档啦。
vue-router官网：http://router.vuejs.org/zh-cn/（中）
英文官网你知道啦，直接去掉后面的”zh-cn/”就好了。
开始使用vue-router
这里我假设大家之前都用模块工程的方式实践了一个vue Demo，在此基础上我们添加vue-router。
1.安装
npm install vue-router 2.在项目main.js中安装路由插件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) 3.在组件中使用路由
先看下路由跳转的效果吧，大家注意看地址栏变化哈。
下面这个tabBar就是一个组件（偷偷告诉你，在微信小程序中，这个功能直接配置app.json文件就好了）
每个tab点击时路由地址会相应变化，其实是渲染相应的组件，具体我们来看代码。
footer.vue组件
<template>
<div class="footer">
<div class="readType" v-if="readType.count">{{readType.count}}</div>
<ul class="main-nav">
<li>
<router-link to="/home">
<i class="icon-nav icon-nav1"></i><span>首页</span>
</router-link>
</li>
<li>
<router-link to="/quan" v-bind:class="{rrouter:activ}">
<i class="icon-nav icon-nav2"></i><span>学友圈</span>
