概述
Vue非常适用于实践单页面应用程序也就是平时大家说的比较多的SPA（single page application），这点应该了解过Vue的应该都知道吧。一般的单页面应用是基于路由或页面之间的链接来形成的，Vue是基于路由和组件的，所以我们今天就来了解下vue-router。vue-router是Vue.js官方的路由插件，它和vue.js深度集成，用于设定访问路径，并将路径和组件映射起来，我们给每个组件一个路由地址，跳转路由相当于组件切换。vue-router的内容还是比较多的，这里我只分享我自己项目中用到的地方，其他地方大家可以看文档啦。
开始使用vue-router
npm install vue-router
2.在项目main.js中安装路由插件
import Vue from ‘vue‘ ?import VueRouter from ‘vue-router‘ ?Vue.use(VueRouter) ?
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‘) ?// 现在，应用已经启动了！ ?总结
上篇先分享到这里，主要了解了有以下几点：
1.vue-router的安装和使用
2.在组件模板中的书写格式
3.知道了路由出口
4.如何定义一个路由
5.创建路由实例和挂载实例
Vue.js系列之vue-router(上) （转载自向朔1992）
原文地址：http://www.cnblogs.com/wujiaqi/p/7767249.html