1. 介绍
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
2. 安装
- 直接下载
https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/[email protected]/dist/vue-router.js 这样指定 版本号 或者 Tag。
在 Vue 后面加载 vue-router，它会自动安装的：
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
-
npm安装
npm install vue-router如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)安装前需要修改配置文件
如果使用全局的 script 标签，则无须如此 (手动安装)。 -
构建开发版
如果你想使用最新的开发版，就得从 GitHub 上直接 clone，然后自己 build 一个 vue-router。git clone https://github.com/vuejs/vue-router.git node_modules/vue-router cd node_modules/vue-router npm install npm run build
``
3. 基本使用
实例：
<!doctype html>
<html lang="en">
<head>
<title>Vue入门与实例</title>
<meta charset="utf-8">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<style type="text/css">
.fade {
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a v-link="{ path : '/home'}">Home</a>
<a v-link="'home'"></a>
</li>
<li>
<a v-link="{ path : '/list'}">List</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!-- 当我们改变路由，会刷新router-view里边的内容 -->
<router-view></router-view>
</div>
</div>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js'></script>
<script src='http://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>
<script type="text/javascript">
var Home = Vue.extend({
template: '<h1>This is the home page</h1>'
});
// 路由器需要一个根组件，尤其演示的目的，这里使用一个空的组件，直接使用html做为应用的模板
var App = Vue.extend({})
// 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
var router = new VueRouter({
// hashbang : false,
// history : true,
transitionOnLoad: true
})
// 定制路由规则
// 每条路由规则应该映射到一个组件，这里的组件可以是一个使用Vue.extend
// 创建的组件构造函数，也可以是一个组件选项对象
// 调用router的map方法映射路由，每条路由以key-value的形式存在，key是路径，value是组件。例如：'/home'是一条路由的key，它表示路径；{component: Home}则表示该条路由映射的组件。
router.map({
'/home': {
component: Home
},
'/list': {
component: {
template: '<ul> \
<li><a v-link="{path: \'1\', append : true}">1</a> \
</ul>',
ready: function() {
console.log(this.$route.matched)
}
}
}
})
router.start(App, '#app')
</script>
</body>
</html>
