在new vueRouter的時候我們可以傳入一個mode屬性，他可以接收三個值：hash/history/abstract

hash和history的區別

history的路徑更美觀一點 比如http://yoursite.com/user/id,history是基於pushState()來完成 URL 跳轉而無須重新載入頁面。 但是強制重新整理還是會有問題（服務端來解決這個問題），所以history模式需要後端人員配合使用。

hash的路徑會帶有#,比如http://yoursite.com#/user/id

HashHistory

class VueRouter{
 constructor(options){
  this.matcher = createMatcher(options.routes || []);
//這裡為了講解hash模式 所以就不進行判斷使用者傳進來的是哪種模式了
  this.history = new HashHistory(this);//this vue-router的例項
  }
}

原始碼這裡建立了一個基類我們這裡和原始碼統一，這個基類封裝了三種模式公用的方法和屬性,那麼我們在這裡建立一個HashHistory和基類History

import History from './base'
// hash路由
export default class HashHistory extends History{
 constructor(router){
  super(router); //繼承呼叫父類 等於call
 }
}
// 路由的基類
export default class History {
 constructor(router){
  this.router = router;
 }
}

如果是hash路由,開啟網站如果沒有hash預設應該新增#/

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
 }
}

再看一下初始化的邏輯（上面的router.init函式）

init(app){www.cppcns.com
  const history = this.history;
  // 初始化時，應該先拿到當前路徑，進行匹配邏輯

  // 讓路由系統過度到某個路徑
  const setupHashListener = ()=> {
   history.setupListener(); // 監聽路徑變化
  }
  history.transitionTo( // 父類提供方法負責跳轉
   hCyHXjtPmXQistory.getCurrentLocation(),// 子類獲取對應的路徑
   // 跳轉成功後註冊路徑監聽，為檢視更新做準備
   setupHashListener
  )
}

這裡我們要分別實現 transitionTo(基類方法)、 getCurrentLocation 、setupListener

getCurrentLocation實現

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

setupListener實現

export default class HashHistory extends History{
 // ...
 setupListener(){
  window.addEventListener('hashchange',()=> {
   // 根據當前hash值 過度到對應路徑
   this.transitionTo(getHash());
  })
 }
}www.cppcns.com

TransitionTo實現

export function createRoute(record,location) { // {path:'/',matched:[record,record]}
 let res = [];
 if (record) { // 如果有記錄 
  while(record){
   res.unshift(record); // 就將當前記錄的父親放到前面
   record = record.parent
  }
 }
 return {
  ...location,matched: res
 }
}
export default class History {
 constructor(router) {
  this.router = router;
  // 根據記錄和路徑返回物件,稍後會用於router-view的匹配
  this.current = createRoute(null,{
   path: '/'
  })
 }
 // 核心邏輯
 transitionTo(location,onComplete) {
  // 去匹配路徑
  let route = this.router.match(location);
  // 相同路徑不必過渡
  if(
   location === route.path && 
   route.matched.length === this.current.matched.length){
   return 
  }
  //更新路由並且下面會提到改變根例項上的_route屬性
  this.updateRoute(route)
  onComplete && onComplete();
 }
}

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

macth方法

function match(location){ // 稍後根據路徑找到對應的記錄
 let record = pathMap[l程式設計客棧ocation]
 if (record) { // 根據記錄建立對應的路由
 //引數：/about/a:{path:xx,component...},path:'/about/a'
  return createRoute(record,{
   path:location
  })
 }
 // 找不到則返回空匹配
 return createRoute(null,{
  path: location
 })
}

我們不難發現路徑變化時都會更改current屬性，我們可以把current屬性變成響應式的，每次current變化重新整理檢視即可
在install方法中

install(Vue) {
 Vue.mixin({ // 給所有元件的生命週期都增加beforeCreate方法
  beforeCreate() {
   if (this.$options.router) { 
   //呼叫Vue類中雙向資料繫結方法
   Vue.util.defineReactive(this,'_route',this._router.history.current);
   } 
  }
 });
 // $route和$router方法 這兩個方法僅僅是vue中最常見的代理 僅僅是為了更加方便
 Object.defineProperty(Vue.prototype,'$route',{ // 每個例項都可以獲取到$route屬性
  get(){
   return this._routerRoot._route;//上面剛進行雙向資料繫結的
  }
 });
 Object.defineProperty(Vue.prototype,'$router',{ // 每個例項都可以獲取router例項
  get(){
   return this._routerRoot._router;
  }
 })
 }

切換路由每次初始化時都需要呼叫更新_route的方法，因為install的時候把_route進行雙向資料繫結，剛進來是沒有this._router.history.current的，通過釋出訂閱方式來進行訂閱和更新操作；在init方法中增加監聽函式

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

export default class History {
 constwww.cppcns.comructor(router) {
  // ...
  this.cb = null;
 }
 listen(cb){
  this.cb = cb; // 註冊函式
 }
 updateRoute(route){
  this.current =route;
  this.cb && this.cb(route); // 更新current後 更新_route屬性
 }
}

以上就是詳解vue的hash跳轉原理的詳細內容，更多關於vue的hash跳轉原理的資料請關注我們其它相關文章！