Vue-Router 原始碼分析(三) VueRouter實體的屬性和方法-有解無憂

我們首先用new VueRouter()創建一個VueRouter實體，之后在創建根Vue實體時把這個VueRouter實體作為router屬性傳遞進去，在這個程序中一般有兩種方法可以獲取到該VueRouter的實體

第一種是node環境下，我們一般在專案原始碼的路勁下創建一個router目錄，該目錄保存所有的路由配置資訊，例如:

var router = new Router({
  routes: [/*略*/]
})
router.forEach((to,from,next)=>{
  next();
})
export default router;

這里我們創建new Router實體后可以直接對該實體進行操作，比如這里通過VueRouter實體設定了forEach導航守衛

還有一種獲取VueRouter實體的地方是在vue內，我們可以通過this.$router獲取到VueRouter實體:

this.$router.push('/login')

通過this.$router我們可以通過push、back等API進行路由跳轉，對于VueRouter實體來說它含有如下屬性和方法:

app 　　配置了router的Vue根實體
mode 當前的路由模式，可以為hash、history或者abstract
options 創建VueRouter實體時傳入的所有引數
history 當前的History物件(通過該物件進行路由跳轉的)
addRoutes 動態添加更多的路由規則，引數必須時一個符合routes選項要求的陣列
push 路由到新的路由地址
replace 替換當前路由到新的路由(它不會向history添加新記錄)
go 在history記錄中向前或向后退多少步
back 在history記錄中后退一步,等效于go(-1)
forward 在history記錄中前進一步,等效于go(1)
beforeEach 全域前置守衛
beforeResolve 全域決議守衛
afterEach 全域后置鉤子
onReady(callback,errorCallback) 注冊兩個回呼函式，在路由完成初始導航時觸發
onError(callback) 　　　　注冊一個回呼，該回呼會在導航程序中出錯時被呼叫

對于app屬性來說，我們經常用到的地方就是在導航首位里可以通過router.app.$store.tokens獲取當前是否有tokens,如果沒有，則路由到登錄頁面

在vue組件內可以通過this.$router.push()等進行路由跳轉，這些都是執行VueRouter實體的方法來實作的，

在Vue原始碼內，VueRouter是一個函式物件，如下:

var VueRouter = function VueRouter (options) {      //建構式
  if ( options === void 0 ) options = {};             //如果option為undefined,則修正為空物件

  this.app = null;
  this.apps = [];
  this.options = options;                             //保存options
  this.beforeHooks = [];                              //初始化三個陣列，分別對應beforeEach、beforeResolve、afterEach三個全域導航守衛的注冊函式
  this.resolveHooks = [];
  this.afterHooks = [];
  this.matcher = createMatcher(options.routes || [], this);

  //初始化/修正mode
  var mode = options.mode || 'hash';
  this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false;
  if (this.fallback) {
    mode = 'hash';
  }
  if (!inBrowser) {
    mode = 'abstract';
  }
  this.mode = mode;

  switch (mode) {                                     //根據不同的模式，對this.history做出實體化
    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:
      {
        assert(false, ("invalid mode: " + mode));
      }
  }
};

其它的方法都是定義在VueRouter的原型物件上的，對于跳轉的介面來說(push、replace、go、back、forward)來說，它們是操作this.history物件來實作跳轉的，

vue初始化時會在beforeCreate生命周期函式內會執行VuerRouter實體的init方法，如下:

VueRouter.prototype.init = function init (app ) {     //路由初始化，在Vue實體的beforeCreate生命周期時執行 app:使用了該Vue-router的Vue實體，頁面初始化時執行到這里
    var this$1 = this;                                    //this$1指向VueRouter實體

  "development" !== '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;                                         //設定this.app等于app，也就是Vue實體

  var history = this.history;                             //獲取history實體

  if (history instanceof HTML5History) {                  //執行History.transitionTo()進行路由初始化，路由初始化完成后會觸發onReady()注冊的回呼函式的，
    history.transitionTo(history.getCurrentLocation());
  } else if (history instanceof HashHistory) {            
    var setupHashListener = function () {
      history.setupListeners();
    };
    history.transitionTo(
      history.getCurrentLocation(),
      setupHashListener,
      setupHashListener
    );
  }

  history.listen(function (route) {
    this$1.apps.forEach(function (app) {
      app._route = route;
    });
  });
};

路由初始胡完成后就會等到<Vue-Link>觸發相應的事件(默認為click)進行路由跳轉了，或者通過push()、go()等函式式編程觸發了，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/7049.html

標籤：HTML5

上一篇：H5表單驗證特性（雜七雜八知識點）

下一篇：H5微信分享的坑