说明：

我们项目现在用的是：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

npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

下面这个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>
				</router-link>
			</li>
			<li>
				<router-link to="/friend">
					<i class="icon-nav icon-nav3"></i><span>学友</span>
				</router-link>
			</li>
			<li>
				<router-link to="/find">
					<i class="icon-nav icon-nav4"></i><span>发现</span>
				</router-link>
			</li>
			<li>
				<router-link to="/mine">
					<i class="icon-nav icon-nav5"></i><span>我的</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>

1.使用 router-link 组件来导航.

2.通过传入 `to` 属性指定链接.

3.<router-link> 默认会被渲染成一个 `<a>` 标签

路由出口

我们前面说了，路由跳转就是相应组件在渲染，那么渲染的内容是怎么显示也页面中的呢，那就是路由出口'<router-view></router-view>'做的事了，路由匹配到的组件将渲染在这里。

路由出口我们可以设置在当前组件中也可以设置在其他组件中，项目中我们就将所有组件都渲染在最大的容器App.vue组件中（我们项目中App组件只作为渲染容器）。

<template>
  <div id="app">
	<router-view></router-view>
  </div>
</template>

JavaScript

定义路由文件可以直接写在main.js文件中，也可以新建一个js文件，因为我们的组件比较多，所以单独把路由拿出来写了一个router.js文件。

// 0. 如果使用模块化机制编程，进入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来，我们一般都是建好了组件再来写路由的
// 所以就会有好多这样的语句。
import home from "./components/home"
import login from "./components/login"

// 2. 定义路由
  routes: [	//这里跟1.x有挺大区别，有接触的自己看清楚哦
    {
      path: '/',	//浏览器网路请求走通之后默认就会去找域名下的根目录，
      name: 'home',	//所以我们就把这个组件作为默认首页
      component: home
    },
    {
      path: '/login',
      name: 'login',
      component: login
    }
   ]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({		//你就当const是var
  routes
//（缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
// 现在，应用已经启动了！

总结

内容有点多，可能还要再分细一点，写详细点。但还是想把自己遇到过的问题，用到的知识点通过自己的理解分享出来。

明天还是要用markDown来写，默认的这个编辑器排版实在太累了，经常出问题，但是我的markDown不知道为什么，光标经常会自动换行，不知道有没有朋友遇到过，能否解答一下。