vue2有着深度继承的路由插件，即：vue-router，其中文的API地址。
vue-router与其他的路由（direactor、sammy）等不同，它是与vue2深度继承的，所以路由也是针对vue组件的。
安装
直接下载 / CDN 方式
Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像https://unpkg.com/vue-router@2.0.0/dist/vue-router.js这样指定 版本号 或者 Tag。在 Vue.js后面加载 vue-router.js，它会自动安装的：
<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'
//vueRouter是vue的插件，所以需要使用use方法来加载
Vue.use(VueRouter)
如果使用全局的 script 标签，则无须如此（手动安装）。
1.入门例子
下面是一个简单的入门例子，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-router功能</title>
<script type="text/javascript" src="js/vue.2.1.0.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1 v-text="title"></h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 使用标签的好处是能在切换模式的时候，router-link会自动修改模式 -->
<!--可以直接写style、css、id等属性，以及自定义的数据-->
<router-link id='foolink' data-n='2222' to="/foo" tag="li" style='color:red' class='linkCls'>Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-link to="/bar/bar01">Go to Bar01</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script type="text/javascript">
//如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
//VueRouter是vue的插件，所以在入口文件需要用vue的use方法加载Vuerouter
// Vue.use(VueRouter)
var router = new VueRouter({
mode:'hash' //router的模式，分为history 、hash(默认)
,routes:[
{ path: '/foo', component: {template:'<div>foo</div>'} }
,{ path: '/bar', component: {template:'<div>bar</div>'} }
]
})
//如果使用全局的 script 标签，则无须如此（手动安装）。
var vm = new Vue({
el:'#app'
,router:router //通过vue配置中的router挂载router实例
,data:{
title:'Hello vue-router'
}
});
</script>
</body>
</html>
上面的例子中用到了两个标签组件
- <router-link> 即：API
<router-link>组件支持用户在具有路由功能的应用中（点击）导航。 通过 to属性指定目标地址，默认渲染成带有正确链接的 <a/> 标签，可以通过配置 tag属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。另外，router-link可以直接添加class和style来写样式。
<router-link>比起写死的 <a href="...">会好一些，理由如下：
- 无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
- 在 HTML5 history 模式下，router-link会拦截点击事件，让浏览器不在重新加载页面。
- 当你在 HTML5 history 模式下使用 base选项之后，所有的 to属性都不需要写（基路径）了
- <router-view>：组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view>渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。
2.动态路由匹配
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router的路由路径中使用『动态路径参数』
具体的demo代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-router功能 2 动态路由</title>
<script type="text/javascript" src="js/vue.2.1.0.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1 v-text="title"></h1>
<p>
<router-link to="/user">user list</router-link>
</p>
<router-view></router-view>
</div>
<script type="text/javascript">
//用户列表组件
var UserList = Vue.extend({
data:function(){
return {
title:'用户列表'
,userList:[
{id:'1',name:'louis screw'}
,{id:'2',name:'shirley wang'}
]
}
}
,template:'\
<ul>\
<li v-for="user in userList">\
<router-link :to="{ path: \'/user/\'+user.id }">\
<span v-text="user.id"></span>\
<span v-text="user.name"></span>\
</router-link>\
</li>\
</ul>\
'
});
var User = Vue.extend({
data:function(){
return {
title:'User的详细页面'
}
}
,watch: {
'$route':function(to, from) {//监控在当前组件中路由发生变化时执行的函数，如果/user/1 切换到 /user/2时就会执行此方法
console.log(to,from)
}
}
,template:'\
<div>\
<div v-text="title"></div>\
<div>传递过来的用户编号 {{ $route.params.id }}</div>\
</div>\
'
});
var router = new VueRouter({
mode:'hash' //router的模式，分为history 、hash(默认)
,routes:[
{ path: '/', redirect: '/user' } //router的重定向方法
,{ path: '/user', component: UserList }
,{ path: '/user/:id', component: User }
]
});
//如果使用全局的 script 标签，则无须如此（手动安装）。
var vm = new Vue({
el:'#app'
,router:router //通过vue配置中的router挂载router实例
,data:{
title:'Hello vue-router'
}
});
</script>
</body>
</html>
上述的例子中有两个组件，UserList组件和User组件，在UserList组件中根据User的id切换User组件，并在User组件中得到uri传递过来的参数
2.1 获取路由参数
一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，在 User的模板，输出当前用户的 ID：
var User = { template: '<div>User {{ $route.params.id }}</div>'}
你可以在一个路由中设置多段『路径参数』，对应的值都会设置到 $route.params中。例如：
| 模式 | 匹配路径 | $route.params |
|---|---|---|
| /user/:username | /user/evan | { username: 'evan' } |
| /user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: 123 } |
除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query（如果 URL 中有查询参数）、$route.hash 等等。你可以查看 API 文档 的详细说明。
3.嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。
具体的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-router功能 3 嵌套路由</title>
<script type="text/javascript" src="js/vue.2.1.0.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1 v-text="title"></h1>
<router-view></router-view>
</div>
<script type="text/javascript">
//用户列表组件
var UserList = Vue.extend({
data:function(){
return {
title:'用户列表'
,userList:[
{id:'1',name:'louis screw'}
,{id:'2',name:'shirley wang'}
]
}
}
,template:'\
<div>\
<ul>\
<li v-for="user in userList">\
<router-link :to="{ path: \'/user/\'+user.id }">\
<span v-text="user.id"></span>\
<span v-text="user.name"></span>\
</router-link>\
</li>\
</ul>\
<router-view></router-view>\
</div>\
'
});
var User = Vue.extend({
data:function(){
return {
title:'User的详细页面'
}
}
,template:'\
<div>\
<div v-text="title"></div>\
<div>传递过来的用户编号 {{ $route.params.id }}</div>\
</div>\
'
});
var router = new VueRouter({
mode:'hash' //router的模式，分为history 、hash(默认)
,routes:[
{ path: '/', redirect: '/user' } //router的重定向方法
,{ path: '/user'
, component: UserList
, children:[
//要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
// 当 /user/:id 匹配成功，子路由最好写成相对父路由的写法 或者 绝对全路径的方法
//path:'/user/:id' 和 path:':id' 最终的效果是一样的
{path:'/user/:id',component: User}
]
}
]
});
//如果使用全局的 script 标签，则无须如此（手动安装）。
var vm = new Vue({
el:'#app'
,router:router //通过vue配置中的router挂载router实例
,data:{
title:'Hello vue-router'
}
});
</script>
</body>
</html>
4.编程式的导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
4.1 router.push(location)
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。
| 声明式 | 编程式 |
|---|---|
| <router-link :to="..."> | router.push(...) |
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
4.2 router.replace(location)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
| 声明式 | 编程式 |
|---|---|
| <router-link :to="..." replace> | router.replace(...) |
4.3 router.go
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
例子
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
5.命名路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
var router = new VueRouter({
routes: [
{
path: '/user/:id',
name: 'user',
component: User
}
]
})
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这跟代码调用 router.push() 是一回事：
router.push({ name: 'user', params: { userId: 123 }})
这两种方式都会把路由导航到 /user/123 路径。
6.命名视图
有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：
var router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
7.重定向
重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：
var router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一个方法，动态返回重定向目标：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
8.导航钩子
正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。
8.1全局钩子
你可以使用 router.beforeEach 注册一个全局的 before 钩子：
var router = new VueRouter({ ... })
router.beforeEach(function(to,from,next){
});
当一个导航触发时，全局的 before 钩子按照创建顺序调用。钩子是异步解析执行，此时导航在所有钩子 resolve 完之前一直处于 等待中。
每个钩子方法接收三个参数：
- to: Route: 即将要进入的目标 路由对象
- from: Route: 当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
- next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
确保要调用 next 方法，否则钩子就不会被 resolved。
同样可以注册一个全局的 after 钩子，不过它不像 before 钩子那样，after 钩子没有 next 方法，不能改变导航：
router.afterEach(route => {
// ...
})
8.2 某个路由独享的钩子
你可以在路由配置上直接定义 beforeEnter 钩子：
var router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
这些钩子与全局 before 钩子的方法参数是一样的。
8.3 组件内的钩子
最后，你可以使用 beforeRouteEnter 和 beforeRouteLeave，在路由组件内直接定义路由导航钩子，
var Foo = {
template: `...`,
beforeRouteEnter:function(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
},
beforeRouteLeave:function(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
beforeRouteEnter 钩子 不能 访问 this，因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
你可以 在 beforeRouteLeave 中直接访问 this。这个 leave 钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 next(false) 来取消导航。
