class VueRouter{
 constructor(options){
  this.matcher = createMatcher(options.routes || []);
//這里為了講解hash模式 所以就不進(jìn)行判斷用戶傳進(jìn)來(lái)的是哪種模式了
  this.history = new HashHistory(this);//this vue-router的實(shí)例
  }
}

import History from './base'
// hash路由
export default class HashHistory extends History{
 constructor(router){
  super(router); //繼承調(diào)用父類 等于call
 }
}
// 路由的基類
export default class History {
 constructor(router){
  this.router = router;
 }
}

import History from './base';
function ensureSlash(){ 
 if(window.location.hash){
  return 
 }
 window.location.hash = '/'
}
export default class HashHistory extends History{
 constructor(router){
  super(router);
  ensureSlash(); // 確保有hash
 }
}

init(app){
  const history = this.history;
  // 初始化時(shí)，應(yīng)該先拿到當(dāng)前路徑，進(jìn)行匹配邏輯

  // 讓路由系統(tǒng)過(guò)度到某個(gè)路徑
  const setupHashListener = ()=> {
   history.setupListener(); // 監(jiān)聽(tīng)路徑變化
  }
  history.transitionTo( // 父類提供方法負(fù)責(zé)跳轉(zhuǎn)
   history.getCurrentLocation(), // 子類獲取對(duì)應(yīng)的路徑
   // 跳轉(zhuǎn)成功后注冊(cè)路徑監(jiān)聽(tīng)，為視圖更新做準(zhǔn)備
   setupHashListener
  )
}

function getHash(){
 return window.location.hash.slice(1);
}
export default class HashHistory extends History{
 // ...
 getCurrentLocation(){
  return getHash();
 }
}

export default class HashHistory extends History{
 // ...
 setupListener(){
  window.addEventListener('hashchange', ()=> {
   // 根據(jù)當(dāng)前hash值 過(guò)度到對(duì)應(yīng)路徑
   this.transitionTo(getHash());
  })
 }
}

export function createRoute(record, location) { // {path:'/',matched:[record,record]}
 let res = [];
 if (record) { // 如果有記錄 
  while(record){
   res.unshift(record); // 就將當(dāng)前記錄的父親放到前面
   record = record.parent
  }
 }
 return {
  ...location,
  matched: res
 }
}
export default class History {
 constructor(router) {
  this.router = router;
  // 根據(jù)記錄和路徑返回對(duì)象,稍后會(huì)用于router-view的匹配
  this.current = createRoute(null, {
   path: '/'
  })
 }
 // 核心邏輯
 transitionTo(location, onComplete) {
  // 去匹配路徑
  let route = this.router.match(location);
  // 相同路徑不必過(guò)渡
  if(
   location === route.path && 
   route.matched.length === this.current.matched.length){
   return 
  }
  //更新路由并且下面會(huì)提到改變根實(shí)例上的_route屬性
  this.updateRoute(route)
  onComplete && onComplete();
 }
}

export default class VueRouter{
 // ...
 //做一個(gè)代理
 match(location){
  return this.matcher.match(location);
 }
}

function match(location){ // 稍后根據(jù)路徑找到對(duì)應(yīng)的記錄
 let record = pathMap[location]
 if (record) { // 根據(jù)記錄創(chuàng)建對(duì)應(yīng)的路由
 //參數(shù)：/about/a:{path:xx,component...},path:'/about/a'
  return createRoute(record,{
   path:location
  })
 }
 // 找不到則返回空匹配
 return createRoute(null, {
  path: location
 })
}

install(Vue) {
 Vue.mixin({ // 給所有組件的生命周期都增加beforeCreate方法
  beforeCreate() {
   if (this.$options.router) { 
   //調(diào)用Vue類中雙向數(shù)據(jù)綁定方法
   Vue.util.defineReactive(this,'_route',this._router.history.current);
   } 
  }
 });
 // $route和$router方法 這兩個(gè)方法僅僅是vue中最常見(jiàn)的代理 僅僅是為了更加方便
 Object.defineProperty(Vue.prototype,'$route',{ // 每個(gè)實(shí)例都可以獲取到$route屬性
  get(){
   return this._routerRoot._route;//上面剛進(jìn)行雙向數(shù)據(jù)綁定的
  }
 });
 Object.defineProperty(Vue.prototype,'$router',{ // 每個(gè)實(shí)例都可以獲取router實(shí)例
  get(){
   return this._routerRoot._router;
  }
 })
 }

history.listen((route) => { // 需要更新_route屬性，出入一個(gè)函數(shù)
 app._route = route
});

export default class History {
 constructor(router) {
  // ...
  this.cb = null;
 }
 listen(cb){
  this.cb = cb; // 注冊(cè)函數(shù)
 }
 updateRoute(route){
  this.current =route;
  this.cb && this.cb(route); // 更新current后 更新_route屬性
 }
}