VUEルーティングガード——コンポーネント内のルーティングガード

vue公式、VUE.jsコンポーネント内ナビゲーションガード.ルーティング・コンポーネント内で、次のルーティング・ナビゲーション・ガードを直接定義できます.beforeRouteEnter beforeRouteUpdate(2.2新規)beforeRouteLeave beforeRouteUpdate ， ， 。

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    //              confirm    
    //  ！ ！       `this`
    //         ，         
  },
  beforeRouteUpdate (to, from, next) {
    //        ，           
    //     ，              /foo/:id，  /foo/1   /foo/2        ，
    //          Foo   ，          。                。
    //          `this`
  },
  beforeRouteLeave (to, from, next) {
    //                
    //          `this`
  }
}

beforeRouteEnterガードはthisにアクセスできません.ガードはナビゲーション確認前に呼び出されるため、間もなく登場する新しいコンポーネントはまだ作成されていません.
ただし、nextにコールバックすることで、コンポーネントインスタンスにアクセスできます.ナビゲーションが確認されたときにコールバックを実行し,コンポーネントインスタンスをコールバックメソッドのパラメータとする.

beforeRouteEnter (to, from, next) {
  next(vm => {
    //    `vm`       
  })
}

注意beforeRouteEnterは、nextへのコールバックをサポートする唯一のガードである.beforeRouteUpdateおよびbeforeRouteLeaveでは、thisは既に利用可能であるため、必要がないため、転送コールバックはサポートされない.

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

この離脱ガードは、通常、ユーザが変更を保存する前に突然離脱することを禁止するために使用される.このナビゲーションは、next(false)によってキャンセルすることができる.

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

完全なナビゲーション解析プロセス

ナビゲーションがトリガーされます.

は、不活性化されたコンポーネント内でガードを離れるように呼び出される.

は、グローバルなbeforeEachガードを呼び出す.

は、再利用されたコンポーネントにおいてbeforeRouteUpdateガード(2.2+)を呼び出す.

は、ルーティング構成においてbeforeEnterを呼び出す.

非同期ルーティングコンポーネントを解析します.

は、アクティブ化されたコンポーネントにおいてbeforeRouteEnterを呼び出す.

は、グローバルのbeforeResolveガード(2.5+)を呼び出す.

ナビゲーションが確認されました.

は、グローバルなafterEachフックを呼び出す.

はDOM更新をトリガする.

は、作成されたインスタンスを用いて、beforeRouteEnterガードにおいてnextに伝達されるコールバック関数を呼び出す.