浅析vue-router原理

//main.js文件中
const router = new vuerouter({
 mode: 'history',
 routes: [...]
})

export const routes = [ 
 {path: "/", name: "homelink", component:home}
 {path: "/register", name: "registerlink", component: register},
 {path: "/login", name: "loginlink", component: login},
 {path: "*", redirect: "/"}] 

let router = new vuerouter({routes:[{path:'/home',component:home}]});

<router-view></router-view>

//main.js文件中引入
import vue from 'vue';
import vuerouter from 'vue-router';
//主体
import app from './components/app.vue';
import index from './components/index.vue'
//安装插件
vue.use(vuerouter); //挂载属性
//创建路由对象并配置路由规则
let router = new vuerouter({
  routes: [
    //一个个对象
    { path: '/index', component: index }
  ]
});
//new vue 启动
new vue({
  el: '#app',
  //让vue知道我们的路由规则
  router: router, //可以简写router
  render: c => c(app),
})

//app.vue中
<template>
  <div>
    <!-- 留坑，非常重要 -->
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data(){
      return {}
    }
  }
</script>

export default class vuerouter {
 static install: () => void;
 static version: string;
 app: any;
 apps: array<any>;
 ready: boolean;
 readycbs: array<function>;
 options: routeroptions;
 mode: string;
 history: hashhistory | html5history | abstracthistory;
 matcher: matcher;
 fallback: boolean;
 beforehooks: array<?navigationguard>;
 resolvehooks: array<?navigationguard>;
 afterhooks: array<?afternavigationhook>;
 constructor (options: routeroptions = {}) {
  this.app = null
  this.apps = []
  this.options = options
  this.beforehooks = []
  this.resolvehooks = []
  this.afterhooks = []
  // 创建 matcher 匹配函数
  this.matcher = creatematcher(options.routes || [], this)
  // 根据 mode 实例化具体的 history，默认为'hash'模式
  let mode = options.mode || 'hash'
  // 通过 supportspushstate 判断浏览器是否支持'history'模式
  // 如果设置的是'history'但是如果浏览器不支持的话，'history'模式会退回到'hash'模式
  // fallback 是当浏览器不支持 history.pushstate 控制路由是否应该回退到 hash 模式。默认值为 true。
  this.fallback = mode === 'history' && !supportspushstate && options.fallback !== false
  if (this.fallback) {
   mode = 'hash'
  }
  // 不在浏览器内部的话，就会变成'abstract'模式
  if (!inbrowser) {
   mode = 'abstract'
  }
  this.mode = mode
   // 根据不同模式选择实例化对应的 history 类
  switch (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, options.base)
    break
   default:
    if (process.env.node_env !== 'production') {
     assert(false, `invalid mode: ${mode}`)
    }
  }
 }
 match (
  raw: rawlocation,
  current?: route,
  redirectedfrom?: location
 ): route {
  return this.matcher.match(raw, current, redirectedfrom)
 }
 get currentroute (): ?route {
  return this.history && this.history.current
 }
 init (app: any /* vue component instance */) {
  process.env.node_env !== 'production' && assert(
   install.installed,
   `not installed. make sure to call \`vue.use(vuerouter)\` ` +
   `before creating root instance.`
  )
  this.apps.push(app)
  // main app already initialized.
  if (this.app) {
   return
  }
  this.app = app
  const history = this.history
  // 根据history的类别执行相应的初始化操作和监听
  if (history instanceof html5history) {
   history.transitionto(history.getcurrentlocation())
  } else if (history instanceof hashhistory) {
   const setuphashlistener = () => {
    history.setuplisteners()
   }
   history.transitionto(
    history.getcurrentlocation(),
    setuphashlistener,
    setuphashlistener
   )
  }
  history.listen(route => {
   this.apps.foreach((app) => {
    app._route = route
   })
  })
 }
 // 路由跳转之前
 beforeeach (fn: function): function {
  return registerhook(this.beforehooks, fn)
 }
 // 路由导航被确认之间前
 beforeresolve (fn: function): function {
  return registerhook(this.resolvehooks, fn)
 }
 // 路由跳转之后
 aftereach (fn: function): function {
  return registerhook(this.afterhooks, fn)
 }
 // 第一次路由跳转完成时被调用的回调函数
 onready (cb: function, errorcb?: function) {
  this.history.onready(cb, errorcb)
 }
 // 路由报错
 onerror (errorcb: function) {
  this.history.onerror(errorcb)
 }
 // 路由添加，这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
 push (location: rawlocation, oncomplete?: function, onabort?: function) {
  this.history.push(location, oncomplete, onabort)
 }
 // 这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
 replace (location: rawlocation, oncomplete?: function, onabort?: function) {
  this.history.replace(location, oncomplete, onabort)
 }
 // 相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
 go (n: number) {
  this.history.go(n)
 }
 // 后退到上一个页面
 back () {
  this.go(-1)
 }
 // 前进到下一个页面
 forward () {
  this.go(1)
 }
 getmatchedcomponents (to?: rawlocation | route): array<any> {
  const route: any = to
   ? to.matched
    ? to
    : this.resolve(to).route
   : this.currentroute
  if (!route) {
   return []
  }
  return [].concat.apply([], route.matched.map(m => {
   return object.keys(m.components).map(key => {
    return m.components[key]
   })
  }))
 }
 resolve (
  to: rawlocation,
  current?: route,
  append?: boolean
 ): {
  location: location,
  route: route,
  href: string,
  // for backwards compat
  normalizedto: location,
  resolved: route
 } {
  const location = normalizelocation(
   to,
   current || this.history.current,
   append,
   this
  )
  const route = this.match(location, current)
  const fullpath = route.redirectedfrom || route.fullpath
  const base = this.history.base
  const href = createhref(base, fullpath, this.mode)
  return {
   location,
   route,
   href,
   // for backwards compat
   normalizedto: location,
   resolved: route
  }
 }
 addroutes (routes: array<routeconfig>) {
  this.matcher.addroutes(routes)
  if (this.history.current !== start) {
   this.history.transitionto(this.history.getcurrentlocation())
  }
 }
}

window.addeventlistener("hashchange",funcref,false)

export class hashhistory extends history {
 constructor (router: router, base: ?string, fallback: boolean) {
  super(router, base)
  // check history fallback deeplinking
  // 如果是从history模式降级来的，需要做降级检查
  if (fallback && checkfallback(this.base)) {
  // 如果降级且做了降级处理，则返回
   return
  }
  ensureslash()
 }
 .......

function checkfallback (base) {
 const location = getlocation(base)
 // 得到除去base的真正的 location 值
 if (!/^\/#/.test(location)) {
 // 如果此时地址不是以 /# 开头的
 // 需要做一次降级处理，降为 hash 模式下应有的 /# 开头
  window.location.replace(
   cleanpath(base + '/#' + location)
  )
  return true
 }
}
function ensureslash (): boolean {
// 得到 hash 值
 const path = gethash()
 if (path.charat(0) === '/') {
  // 如果是以 / 开头的，直接返回即可
  return true
 }
 // 不是的话，需要手动保证一次 替换 hash 值
 replacehash('/' + path)
 return false
}
export function gethash (): string {
 // we can't use window.location.hash here because it's not
 // consistent across browsers - firefox will pre-decode it!
 // 因为兼容性的问题，这里没有直接使用 window.location.hash
 // 因为 firefox decode hash 值
 const href = window.location.href
 const index = href.indexof('#')
 return index === -1 ? '' : decodeuri(href.slice(index + 1))
}
// 得到hash之前的url地址
function geturl (path) {
 const href = window.location.href
 const i = href.indexof('#')
 const base = i >= 0 ? href.slice(0, i) : href
 return `${base}#${path}`
}
// 添加一个hash
function pushhash (path) {
 if (supportspushstate) {
  pushstate(geturl(path))
 } else {
  window.location.hash = path
 }
}
// 替代hash
function replacehash (path) {
 if (supportspushstate) {
  replacestate(geturl(path))
 } else {
  window.location.replace(geturl(path))
 }
}

transitionto (location: rawlocation, oncomplete?: function, onabort?: function) {
  const route = this.router.match(location, this.current) //找到匹配路由
  this.confirmtransition(route, () => { //确认是否转化
   this.updateroute(route) //更新route
   oncomplete && oncomplete(route)
   this.ensureurl()

   // fire ready cbs once
   if (!this.ready) {
    this.ready = true
    this.readycbs.foreach(cb => { cb(route) })
   }
  }, err => {
   if (onabort) {
    onabort(err)
   }
   if (err && !this.ready) {
    this.ready = true
    this.readyerrorcbs.foreach(cb => { cb(err) })
   }
  })
 }
 
//更新路由
updateroute (route: route) {
  const prev = this.current // 跳转前路由
  this.current = route // 装备跳转路由
  this.cb && this.cb(route) // 回调函数，这一步很重要，这个回调函数在index文件中注册，会更新被劫持的数据 _router
  this.router.afterhooks.foreach(hook => {
   hook && hook(route, prev)
  })
 }
}

pushstate
export function pushstate (url?: string, replace?: boolean) {
 savescrollposition()
 // try...catch the pushstate call to get around safari
 // dom exception 18 where it limits to 100 pushstate calls
 // 加了 try...catch 是因为 safari 有调用 pushstate 100 次限制
 // 一旦达到就会抛出 dom exception 18 错误
 const history = window.history
 try {
  if (replace) {
  // replace 的话 key 还是当前的 key 没必要生成新的
   history.replacestate({ key: _key }, '', url)
  } else {
  // 重新生成 key
   _key = genkey()
    // 带入新的 key 值
   history.pushstate({ key: _key }, '', url)
  }
 } catch (e) {
 // 达到限制了 则重新指定新的地址
  window.location[replace ? 'replace' : 'assign'](url)
 }
}

replacestate
// 直接调用 pushstate 传入 replace 为 true
export function replacestate (url?: string) {
 pushstate(url, true)
}

supportspushstate
export const supportspushstate = inbrowser && (function () {
 const ua = window.navigator.useragent
 if (
  (ua.indexof('android 2.') !== -1 || ua.indexof('android 4.0') !== -1) &&
  ua.indexof('mobile safari') !== -1 &&
  ua.indexof('chrome') === -1 &&
  ua.indexof('windows phone') === -1
 ) {
  return false
 }
 return window.history && 'pushstate' in window.history
})()

setuplisteners () {
  window.addeventlistener('hashchange', () => {
    if (!ensureslash()) {
      return
    }
    this.transitionto(gethash(), route => {
      replacehash(route.fullpath)
    })
  })
}

export class html5history extends history {
 constructor (router: router, base: ?string) {
  super(router, base)
  const expectscroll = router.options.scrollbehavior //指回滚方式
  const supportsscroll = supportspushstate && expectscroll
  if (supportsscroll) {
   setupscroll()
  }
  const initlocation = getlocation(this.base)
  //监控popstate事件
  window.addeventlistener('popstate', e => {
   const current = this.current
   // avoiding first `popstate` event dispatched in some browsers but first
   // history route not updated since async guard at the same time.
   // 避免在某些浏览器中首次发出“popstate”事件
   // 由于同一时间异步监听，history路由没有同时更新。
   const location = getlocation(this.base)
   if (this.current === start && location === initlocation) {
    return
   }
   this.transitionto(location, route => {
    if (supportsscroll) {
     handlescroll(router, route, current, true)
    }
   })
  })
 }

//abstract.js实现，这里通过栈的数据结构来模拟路由路径
export class abstracthistory extends history {
 index: number;
 stack: array<route>;

 constructor (router: router, base: ?string) {
  super(router, base)
  this.stack = []
  this.index = -1
 }
 
 // 对于 go 的模拟
 go (n: number) {
  // 新的历史记录位置
  const targetindex = this.index + n
  // 小于或大于超出则返回
  if (targetindex < 0 || targetindex >= this.stack.length) {
   return
  }
  // 取得新的 route 对象
  // 因为是和浏览器无关的 这里得到的一定是已经访问过的
  const route = this.stack[targetindex]
  // 所以这里直接调用 confirmtransition 了
  // 而不是调用 transitionto 还要走一遍 match 逻辑
  this.confirmtransition(route, () => {
   this.index = targetindex
   this.updateroute(route)
  })
 }

//确认是否转化路由
 confirmtransition (route: route, oncomplete: function, onabort?: function) {
  const current = this.current
  const abort = err => {
   if (iserror(err)) {
    if (this.errorcbs.length) {
     this.errorcbs.foreach(cb => { cb(err) })
    } else {
     warn(false, 'uncaught error during route navigation:')
     console.error(err)
    }
   }
   onabort && onabort(err)
  }
  //判断如果前后是同一个路由，不进行操作
  if (
   issameroute(route, current) &&
   route.matched.length === current.matched.length
  ) {
   this.ensureurl()
   return abort()
  }
  //下面是各类钩子函数的处理
  //*********************
  })
 }