其中push函数是跳转新的路由，跳转后可以通过浏览器的回退功能回退到上一个路由

添加gotoCircle函数，这里我们使用push函数做演示，replace函数的传参和push一样，就不多做演示了

这里的传参与上面v-bind绑定的参数一样都是传一个对象，运行效果如下：

vue.js路由使用方法：vue1.0的方法

<a href="#" v-link="{path:'/login'}">登陆</a>

<router-view></router-view>//内容显示的

<script>

//1、准备一个根组件

var App = Vue.extend()

//2、准备组件

var Login = Vue.extend({

template:{<h3>登陆页面</h3>}

})

//3、准备路由 var router = new vueRouter()

//4、关联组件和路径

router.map({

'login':{

component:Login   //组件名称

}

})

//5、启动路由

router.start(App,'#box')

//6、默认跳转页面（不是必须） router.redirect({'/':'login'})

</script>

</html>

1. 在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航

2. 使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

目录结构

先来看看整体的目录结构

和流程相关的主要需要关注点的就是 components、history 目录以及 create-matcher.js、create-route-map.js、index.js、install.js。下面就从 basic 应用入口开始来分析 vue-router 的整个流程。

import Vue from 'vue'

import VueRouter from 'vue-router'

// 1. 插件

// 安装 <router-view>and <router-link>组件

// 且给当前应用下所有的组件都注入 $router and $route 对象

Vue.use(VueRouter)

// 2. 定义各个路由下使用的组件，简称路由组件

const Home = { template: '<div>home</div>' }

const Foo = { template: '<div>foo</div>' }

const Bar = { template: '<div>bar</div>' }

// 3. 创建 VueRouter 实例 router

const router = new VueRouter({

mode: 'history',

base: __dirname,

routes: [

{ path: '/', component: Home },

{ path: '/foo', component: Foo },

{ path: '/bar', component: Bar }

]

})

// 4. 创建 启动应用

// 一定要确认注入了 router

// 在 <router-view>中将会渲染路由组件

new Vue({

router,

template: `<div id="app">

<h1>Basic</h1>

<ul>

<li><router-link to="/">/</router-link></li>

<li><router-link to="/foo">/foo</router-link></li>

<li><router-link to="/bar">/bar</router-link></li>

<router-link tag="li" to="/bar">/bar</router-link>

</ul>

<router-view class="view"></router-view>

</div>

`

}).$mount('#app')123456789101112131415161718192021222324252627282930313233343536373839404142

作为插件

上边代码中关键的第 1 步，利用 Vue.js 提供的插件机制 .use(plugin) 来安装 VueRouter，而这个插件机制则会调用该 plugin 对象的 install 方法（当然如果该 plugin 没有该方法的话会把 plugin 自身作为函数来调用）；下边来看下 vue-router 这个插件具体的实现部分。

VueRouter 对象是在 src/index.js 中暴露出来的，这个对象有一个静态的 install 方法：

/* @flow */

// 导入 install 模块

import { install } from './install'// ...import { inBrowser, supportsHistory } from './util/dom'// ...export default class VueRouter {

// ...}

// 赋值 install

VueRouter.install = install

// 自动使用插件if (inBrowser &&window.Vue) {

window.Vue.use(VueRouter)

}123456789101112131415161718

可以看到这是一个 Vue.js 插件的经典写法，给插件对象增加 install 方法用来安装插件具体逻辑，同时在最后判断下如果是在浏览器环境且存在 window.Vue 的话就会自动使用插件。

install 在这里是一个单独的模块，继续来看同级下的 src/install.js 的主要逻辑：

// router-view router-link 组件import View from './components/view'import Link from './components/link'// export 一个 Vue 引用export let _Vue// 安装函数export function install (Vue) {

if (install.installed) return

install.installed = true

// 赋值私有 Vue 引用

_Vue = Vue // 注入 $router $route

Object.defineProperty(Vue.prototype, '$router', {

get () { return this.$root._router }

}) Object.defineProperty(Vue.prototype, '$route', {

get () { return this.$root._route }

}) // beforeCreate mixin

Vue.mixin({

beforeCreate () { // 判断是否有 router

if (this.$options.router) {// 赋值 _router

this._router = this.$options.router// 初始化 init

this._router.init(this)// 定义响应式的 _route 对象

Vue.util.defineReactive(this, '_route', this._router.history.current)

}

}

}) // 注册组件

Vue.component('router-view', View)

Vue.component('router-link', Link)// ...}12345678910111213141516171819202122232425262728293031323334353637383940414243

这里就会有一些疑问了？

· 为啥要 export 一个 Vue 引用？

插件在打包的时候是肯定不希望把 vue 作为一个依赖包打进去的，但是呢又希望使用 Vue 对象本身的一些方法，此时就可以采用上边类似的做法，在 install 的时候把这个变量赋值 Vue ，这样就可以在其他地方使用 Vue 的一些方法而不必引入 vue 依赖包（前提是保证 install 后才会使用）。

· 通过给 Vue.prototype 定义 $router、$route 属性就可以把他们注入到所有组件中吗？

在 Vue.js 中所有的组件都是被扩展的 Vue 实例，也就意味着所有的组件都可以访问到这个实例原型上定义的属性。

beforeCreate mixin 这个在后边创建 Vue 实例的时候再细说。

实例化 VueRouter

在入口文件中，首先要实例化一个 VueRouter ，然后将其传入 Vue 实例的 options 中。现在继续来看在 src/index.js 中暴露出来的 VueRouter 类：

// ...import { createMatcher } from './create-matcher'// ...export default class VueRouter {

// ...

constructor (options: RouterOptions = {}) {

this.app = null

this.options = options

this.beforeHooks = []

this.afterHooks = []

// 创建 match 匹配函数

this.match = createMatcher(options.routes || [])

// 根据 mode 实例化具体的 History

let mode = options.mode || 'hash'

this.fallback = mode === 'history' &&!supportsHistoryif (this.fallback) {

mode = 'hash'

}if (!inBrowser) {

mode = 'abstract'

}

this.mode = modeswitch (mode) {

case 'history':

this.history = new HTML5History(this, options.base)break

case 'hash':

this.history = new HashHistory(this, options.base, this.fallback)break

case 'abstract':

this.history = new AbstractHistory(this)break

default:

assert(false, `invalid mode: ${mode}`)

}

}

// ...}123456789101112131415161718192021222324252627282930313233343536373839

里边包含了重要的一步：创建 match 匹配函数。

match 匹配函数

匹配函数是由 src/create-matcher.js 中的 createMatcher 创建的：

/* @flow */

import Regexp from 'path-to-regexp'// ...import { createRouteMap } from './create-route-map'// ...export function createMatcher (routes: Array<RouteConfig>): Matcher {

// 创建路由 map

const { pathMap, nameMap } = createRouteMap(routes)

// 匹配函数 function match (

raw: RawLocation,

currentRoute?: Route,

redirectedFrom?: Location

): Route {

// ...

} function redirect (

record: RouteRecord,

location: Location

): Route {

// ...

} function alias (

record: RouteRecord,

location: Location,

matchAs: string

): Route {

// ...

} function _createRoute (

record: ?RouteRecord,

location: Location,

redirectedFrom?: Location

): Route {if (record &&record.redirect) { return redirect(record, redirectedFrom || location)

}if (record &&record.matchAs) { return alias(record, location, record.matchAs)

}return createRoute(record, location, redirectedFrom)

}

// 返回 return match

}

// ...123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051

具体逻辑后续再具体分析，现在只需要理解为根据传入的 routes 配置生成对应的路由 map，然后直接返回了 match 匹配函数。

继续来看 src/create-route-map.js 中的 createRouteMap 函数：

/* @flow */import { assert, warn } from './util/warn'import { cleanPath } from './util/path'// 创建路由 mapexport function createRouteMap (routes: Array<RouteConfig>): {

pathMap: Dictionary<RouteRecord>,

nameMap: Dictionary<RouteRecord>

} { // path 路由 map

const pathMap: Dictionary<RouteRecord>= Object.create(null) // name 路由 map

const nameMap: Dictionary<RouteRecord>= Object.create(null) // 遍历路由配置对象 增加 路由记录

routes.forEach(route =>{

addRouteRecord(pathMap, nameMap, route)

}) return {

pathMap,

nameMap

}

}// 增加 路由记录 函数function addRouteRecord (

pathMap: Dictionary<RouteRecord>,

nameMap: Dictionary<RouteRecord>,

route: RouteConfig,

parent?: RouteRecord,

matchAs?: string

) {

// 获取 path 、name

const { path, name } = route

assert(path != null, `"path" is required in a route configuration.`) // 路由记录 对象

const record: RouteRecord = {

path: normalizePath(path, parent),

components: route.components || { default: route.component },

instances: {},

name,parent,

matchAs,

redirect: route.redirect,

beforeEnter: route.beforeEnter,

meta: route.meta || {}

} // 嵌套子路由 则递归增加 记录

if (route.children) {// ...

route.children.forEach(child =>{

addRouteRecord(pathMap, nameMap, child, record)

})

} // 处理别名 alias 逻辑 增加对应的 记录

if (route.alias !== undefined) {if (Array.isArray(route.alias)) {

route.alias.forEach(alias =>{

addRouteRecord(pathMap, nameMap, { path: alias }, parent, record.path)

})

} else {

addRouteRecord(pathMap, nameMap, { path: route.alias }, parent, record.path)

}

} // 更新 path map

pathMap[record.path] = record // 更新 name map

if (name) {if (!nameMap[name]) {

nameMap[name] = record

} else {

warn(false, `Duplicate named routes definition: { name: "${name}", path: "${record.path}" }`)

}

}

}function normalizePath (path: string, parent?: RouteRecord): string {

path = path.replace(/\/$/, '') if (path[0] === '/') return path if (parent == null) return path return cleanPath(`${parent.path}/${path}`)

}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283

可以看出主要做的事情就是根据用户路由配置对象生成普通的根据 path 来对应的路由记录以及根据 name 来对应的路由记录的 map，方便后续匹配对应。

实例化 History

这也是很重要的一步，所有的 History 类都是在 src/history/ 目录下，现在呢不需要关心具体的每种 History 的具体实现上差异，只需要知道他们都是继承自 src/history/base.js 中的 History 类的：

/* @flow */// ...import { inBrowser } from '../util/dom'import { runQueue } from '../util/async'import { START, isSameRoute } from '../util/route'// 这里从之前分析过的 install.js 中 export _Vueimport { _Vue } from '../install'export class History {// ...

constructor (router: VueRouter, base: ?string) {this.router = routerthis.base = normalizeBase(base)// start with a route object that stands for "nowhere"

this.current = STARTthis.pending = null

}// ...}// 得到 base 值function normalizeBase (base: ?string): string { if (!base) {if (inBrowser) { // respect <base>tag

const baseEl = document.querySelector('base') base = baseEl ? baseEl.getAttribute('href') : '/'

} else { base = '/'

}

} // make sure there's the starting slash

if (base.charAt(0) !== '/') {base = '/' + base