旧版：https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn
此文是旧版
文件结构图：
基本用法：
<router-view>是一个顶级的路由外链，用于渲染匹配的组件。
例如：我的应用入口是app.vue
那么在app.vue中添加如下代码， 此处涉及ES6。
app.vue
<template> <div> <router-view keep-alive transition="slide"></router-view> <Footers></Footers> </div> </template> <script> /* *ES6模块系统特性: 1.使用export关键词导出对象。这个关键字可以无限次使用； 2.使用import关键字将其它模块导入某一模块中。它可用来导入任意数量的模块； 3.支持模块的异步加载； 4.为加载模块提供编程支持。 */ //导入footer组件 import Footers from '../components/footer' //导入路由 import Router from 'vue-router' //default导出，使用关键字default，可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。它既可以用于内联导出，也可以用于一组对象导出声明中。 export default{ components:{ Footers } } </script>
Footer是一个公用的页脚组件，存放于components文件夹中
footer.vue
<template> <div> <a v-link="{path:'/home'}"> <span v-if="$route.name == 'home'">首页</span> <span v-else>首页</span> </a> <a v-link="{path:'/list'}"> <span v-if="$route.name == 'list'">跳转1</span> <span v-else>跳转1</span> </a> <a v-link="{path:'/account'}"> <!-- 根据路由名称判断选中的项 --> <span v-if="$route.name == 'account'">跳转2</span><!-- 满足条件 --> <span v-else>跳转2</span><!--不满足--> </a> </div> </template> <style> .footer{ background: #fff; border-top: 1px solid #dedede; display: table; } .footer a{ display: table-cell; text-align: center; text-decoration: none; color: #666 } .active{ color:red !important; } </style>
由于app.vue是最顶级的入口文件，在app.vue中引用footer组件的话，所有页面都会包含footer内容，但是二级页面等子页面不需要，所以得把app.vue中代码复制到index.vue中，把app.vue中footer相关的部分删掉。
在index.html中添加如下代码，创建一个路由实例。
<app></app>
在main.js中配置route.map
main.js
import Vue from 'vue' import VueRouter from 'vue-router'//导入vue-router //导入组件 import App from './App' import Index from './page/index' import list from './page/list' import Home from './page/home' import Account from './page/account' Vue.use(VueRouter) var router = new VueRouter() router.map({ //默认指向index 'https://www.jb51.net/':{ name:'index', component:Index, //子路由(有页底) subRoutes:{ '/home':{ name:'home', component:Home }, '/account':{ name:'account', component:Account } } }, //没有footer '/list':{ name:'list', component:list } }) //启动一个启用了路由的应用 router.start(App,'app')
router.start中的'app'，指的是index中的：<app></app>，可以取其他的名字，但是得和index中的名字一致。
这时启动项目（npm run dev）会发现，页面上只有footer，而没有显示其他内容。因为index.vue本来就只有footer而没有其他内容，但是我们肯定要显示页面，就要用到
router.redirect(redirectMap)重定向
例如：我们要默认载入home页面
在main.js中加入
//重定向到home router.redirect({ '*':'home' }) router.start(App,'app')
在index中加入init()函数
<script> export default{ components:{ Footers }, init(){ var router = new Router() router.go('/home');//跳转到home组件 } } </script>
然而，经过测试，redirect并没有重定向的home，载入home的真正原因是：router.go('/home')
此时，进入项目就会显示home页面的内容了。
路由规则和路由匹配
Vue-router 做路径匹配时支持动态片段、全匹配片段以及查询参数（片段指的是 URL 中的一部分）。对于解析过的路由，这些信息都可以通过路由上下文对象（从现在起，我们会称其为路由对象）访问。 在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。
$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，例如：/list，来源于route.map中配置的路径
router.map({ '/home':{ name:'list', component:Home } })
dom中
<a v-link="{path:'/list'}">前往list列表页面</a>
或者（具名路径）
<a v-link="{name:'list'}">前往list列表页面</a>
带参数跳转（例如：从列表页跳转到列表详情页）