本文所触及代码全在vue-cnode
vue-router重要作用是将路由掌握，转移到前端。我们将会在vue-router内里保留一个路由表，在vue中细致经由历程挪用供应的指令或则要领举行跳转。
实在吧，vue-router说白了就是一个插件，对外暴露的也就是指令和要领。假如只要求天真用起来，我们须要进修的也就3个处所：
设置路由
指令
要领
设置路由
路由设置实际上是分两步的，第一步把vue-router的指令要领挂到Vue实例，第二步才是增加路由设置上。下面是基本的路由设置：
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from 'App.vue'
Vue.use(VueRouter) // 第一步
const router = new VueRouter({
history: true,
saveScrollPosition: true
}) // 第二步
router.map({
'/': {
name: 'index',
title: '悉数',
component: (resolve) => require(['./components/main/index.vue'], resolve)
},
'/good': {
name: 'good',
title: '英华',
component: (resolve) => require(['./components/main/index.vue'], resolve)
}
})
router.start(App, '#app')这里人人能够去看看源码，源码很简约。重要就是声清楚明了一个Router的对象，Router上面插件要的install要领，然后另有start要领。
源码片断
class Router {
constructor ({
hashbang = true,
abstract = false,
history = false,
saveScrollPosition = false,
transitionOnLoad = false,
suppressTransitionError = false,
root = null,
linkActiveClass = 'v-link-active'
} = {}) {
....
}
Router.install = function (externalVue) {
....
Vue = externalVue
applyOverride(Vue)
View(Vue)
Link(Vue)
util.Vue = Vue
}源码中在Router一共有9个要领：
map
on
redirect
alias
beforeEach
afterEach
go
replace
start
stop
个中start是初始化组件的，
个中触及路由前期设置的是：map, redirect，alias，beforeEach，afterEach，start。go和replace两个要领都是路由跳转的。
map，redirect，alias这3个要领是基本的设置要领，很简单，就请看文档吧。
这里重要讲下beforeEach和afterEach，就和要领名一样他们分别是在路由跳转前后做的一些事变。
在vue-router有一个路由声明周期的观点，这里不睁开来说，你只须要知道我们berforeEach和afterEach背面接的函数是一个钩子函数，钩子函数接收的第一个参数是一个transition对象,transition对象有以下要领，重如果用来掌握路由跳转的。
transition.to 一个我们将要跳转去的路由的对象，这个对象可能有path,name等属性。
transition.from 当前路由对象
transition.next() 挪用此函数处置惩罚切换历程的下一步
transition.abort([reason]) 停止切换
transition.redirect(path) 重定向到另一个路由
afterEach由因而路由切换后，只要上面的to,from两个属性。
为何要零丁讲beforEach和afterEach，由于我们能够在内里做许多全局的东西。比方上岸跳转、文章切换title、特定页面设置属性、挪用vuex的要领等。这里我们讲一个革新title的例子。后续还会有一个全局掌握的文章，再补充些其他例子。
单页运用从始至终都只要会要求一个html，也就须要动态的转变，document title, 我们完全能够将修正title这个历程提到全局，在afterEach内里做，以下所示：
router.map({
'/': {
name: 'index',
title: '悉数',
component: (resolve) => require(['./components/main/index.vue'], resolve)
}
}
// document title change
router.afterEach((transition) => {
document.title = transition.to.title || 'CNode.js'
})在ios下面上述要领还不可，由于ios上有一个bug，不会再修正document.title时更新浏览器上面的title。由于这里并非真正革新页面，所以ios下不会挪用浏览器更新title的事宜吧。
能够用一个iframe的hack要领
指令
vue-router 供应的指令就一个：v-link。
他的作用就是跳转路由。细致用法以下：
<!-- 字面量途径 -->
<a v-link="'home'">Home</a>
<!-- 结果同上 -->
<a v-link="{ path: 'home' }">Home</a>
<!-- 签字途径 -->
<a v-link="{ name: 'user', params: { userId: 123 }}">User</a>细致的用法发起看文档
要领
vue在use vue-router以后就会增加一个$route的属性。内里有许多属性，重要的就是router下面的要领。
我们用的较多的是router.go,另有就是router.on。
这里照样发起看文档，比我搬过来要细致的多。
其他
