ヴュー・ルータの原則の分析 - ルーティングモードとインストール

  Ajaxを介したhtmlファイルと,,だけで使用するようにページ全体をリフレッシュせずにページのレンダリングの異なる部分をロードするためのいくつかの特別な手段を通じてバックエンドのデータ交換、によって、全体のWebシステムの単一ページのアプリケーション（SPA、シングルページアプリケーション）、アプリはとして大いにヴューのコアは、プラグインの使用である、エコロジーのVueでのユーザーエクスペリエンスを強化 - ヴュー・ルータージャンプのWebインターフェースのルーティングを実装するために、そう、この論文は、Vueの-ルーターを理解し、ヴュー・ルーターを研究することですSPAは、特定の原則の完全な開発を実現します。

ウェブルートの概要

  ルーティング、ルーティングシステムの早期Webサーバについてまず簡単に主にフロントとリア側の開発友人に精通しているバックエンドの実装は、私たちが要求したいなど、サーバ内のテーブルをルーティングすることで、適切な方法にマッピングされていることを知っているし、適切なアクションを実行しますAPIデータ、新しいページの文書：

"/" -> goHtml()

"/api/users" -> queryUsers()

  クライアントは、次の2つの方法があり、主要なルートを達成します：

1. 基于Web Url的hash
2. 基于Hishtory API

ハッシュのWeb URLに基​​づいて

   URLハッシュ値は、次のような「＃」記号のパラメータ値、さhttp://www.example.com/index.html#location1localtion1内の値は、主に少し奇妙なものの、「＃」と会社のプロジェクトの前のURLを参照してください、しかし、考えていなかった（次のような特徴を持っていますあなたがた）、カーンを来てほしいです。

1. Url中#后的内容不会发送到服务器；
2. hash值的改变会保存到浏览器的历史浏览记录中，可通过浏览器的回退按钮查看；
3. hash值是可读写的，可通过window.location.hash获取到hash值，利用onhashchange监听hash值的变化(Vue-Router里的hash模式就是在onhashchange中的回调事件中完成路由到界面的更新渲染)。

ベースのAPI Hishtory

  それは一貫している、あなたはHishtory APIモードを使用することができ、バックエンドサーバーへのスタイルと同じ要求をURLには、URLようハッシュベースモデルは便利ですが、＃記号で、一部の学生は少し醜い感じるだろう。主に操作HTML5ブラウザーの履歴APIを操作することにより、提供に基づくHishtory API、それは例えば、アドレスリフレッシュは、アドレスバーを更新達成することはできません。

// pushState  state: 用于描述新记录的一些特性。
// 这个参数会被一并添加到历史记录中，以供以后使用。
// 这个参数是开发者根据自己的需要自由给出的。
// pushState作用相当于修改“#”后面的值
window.history.pushState(state, "title", "/userPage");
// 比如浏览器后退
window.addEventListener("popstate", function(e) {
    var state = e.state;
    // do something...
});
// 与pushState相对仅进行Url替换而不产生新的浏览记录的replaceState方法
window.history.replaceState(null, null, "/userPage");

2つのモードの比較

  私たちは、単にこれら二つのモデルの機能のいくつかを比較します。

VSモード	ハッシュ	Hishtory API
美的外観	＃で、少し醜い認識	美しい相対
互換性	良いです	HTML5をサポートしているブラウザが必要です
URLエラーのバックエンドサポート	ノー	それはあります

  したがって、それはルーティングのために内部のVue-ルータの焦点である設定するには、プロジェクトの実際のニーズに応じて2つのモードの使用は、これらの二つのモデルに基づいています！だから、早く我々は2つのモードのルートのフロントエンドを見てショットをするために考慮されます。

ビュールータ

   最初の4つのステップは、Vueの-ルータを使用したことを思い出し、そして：

import Vue from 'vue';
import VueRouter from 'vue-router'
// 1. 使用Vue-Router插件
Vue.use(VueRouter)
// 2. VueRouter实例化
const router = new VueRouter({
  model: 'history', // 路由模式 hash\history
  routes: [
    {
      name: 'xx',
      path: 'path',
      component: component
    }
  ]
});
// 3. 实例化Vue实例时使用该router路由
new Vue({
  ...
  router,
});

// 4. 通过Vue.$router.push('xx') 或 router-link进行路由跳转

  その後、ヴュー・ルータの4つのステップいくつかの特定の実装の詳細上記連続スヌープに。

プラグヴュー・ルーターを使用してください

  行わインストールVueRouterにVueの内部メソッドVue.use（（）メソッドは、実際に定義されたコールバックVueRouterでインストール）、マウントVueRouterプロセス完了した作業を呼び出すことにより、プラグインのVue規範の開発に従うVueRouter。

-> vue\src\core\global-api\use.js
Vue.use = function (plugin: Function | Object) {
  ... 
  plugin.install.apply(plugin, args);
  ...
}

  戻るVueRouterのソースコード、インストールプロセスの実行の流れを分析します：

import View from './components/view'
import Link from './components/link'

export let _Vue

// install实现
export function install (Vue) {

  // 如果已注册实例，则返回
  if (install.installed && _Vue === Vue) return
  install.installed = true

  _Vue = Vue 

  const isDef = v => v !== undefined

  const registerInstance = (vm, callVal) => {
    // 父虚拟节点
    let i = vm.$options._parentVnode
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
      i(vm, callVal)
    }
  }

  Vue.mixin({
    // 路由钩子函数，在vue执行beforeCreate钩子函数回调时会一起调用，因为beforeCreate是一个数组
    beforeCreate () {
      Vue.$options = options
      if (isDef(this.$options.router)) {
        this._routerRoot = this
        this._router = this.$options.router
        // 调用init
        this._router.init(this)
        // 调用Vue内部util方法使得当前的url实现响应式化
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      // 注册实例
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })
  // 将$router和$route挂载到Vue的原型链上
  Object.defineProperty(Vue.prototype, '$router', {
    get () { return this._routerRoot._router }
  })

  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })

  // 注册路由视图和路由链接两个组件
  Vue.component('RouterView', View)
  Vue.component('RouterLink', Link)

  // 执行Vue的选项合并策略
  const strats = Vue.config.optionMergeStrategies
  // use the same hook merging strategy for route hooks
  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}

  3つのことを行うインストールメインの内側に見ることができます。

• 1. VUEミックスイン方法は、混合グローバルbeforeCreateの使用であり、destoryed時に最初にロード実行beforeCreate、指定された現在のVUEインスタンスの_routerRoot、とinit初期VUE-ルータの（コアまたはinit初期インストール、少し詳細導入後）、beforeCreate方法では、主に初期の親のコンポーネント（即ち搭載ルータノード）に、及びインスタンスの現在_routerRootが緩やか経路がINITを初期化したコンポーネントを対応する組（など、ルーティングモードの設定など）いくつかの構成のような他の成分、及びregisterInstance方法を行う（ルータリンク、ルータビューが_routerRootルータオプションはオプション・パラメータの親（祖先）コンポーネントに設定されているが含まれます）、現在の方法が主な役割で定義された実際の方法のregisterRouteInstanceルータ・ビューコンポーネントで、次のように、現在のレンダリング作業コンポーネントを実行することです：

const registerInstance = (vm, callVal) => {
    // 父虚拟节点
    let i = vm.$options._parentVnode
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
      i(vm, callVal)
    }
  }

  これは、混合の定義に相当する各ライフサイクルの特定の実行例中の成分とのコールバックとしてbeforeCreateは、二つのフック関数をdestoryed、アクションは、経路切り替えの後、このような破壊が行われ、実際には、役割は、ルータクリアに見えることですレンダリングされたコンテンツに-viewコンポーネント。

• 1. $と$ルートルータのプロトタイプチェーンVueのマウントは、この$ルータと、この$ルートを使用することによって行うことができます。..。
• 1. ルータリンクとVueのに二つの成分のルータ・ビューを登録します。

概要

  希望も過言ではないスペースなので、それ以外の場合はより困難になりますので、この記事では、最初の例と記事の後半で議論関与原則の具体的な使用のために、ここに書きました。この中で、この記事の要約を行います。

• これは、フロントエンドルーティングを紹介するだけでなく、二つのモードURLハッシュと履歴APIのフロントエンドルーティングを実現するために、両方の比較を行います。
• これは、ヴュー・ルータVueのアセンブリは、ヴュー・ルータは、内部的に定義されたコールバック内で実際に使用することです方法をインストールする方法について説明します。
• キージョブ機能のいくつかは、メソッドをインストールします。
  • BeforeCreate混合destoryedおよび方法。
  • グローバルマウント$ルータと$ルート。
  • ルータリンクとルータ・ビュー2つのコンポーネントを登録します。
    また、私への歓迎のgit互いにスターから学ぶことができます。