Vueのルータのルーティングガード：完全なナビゲーション解決プロセス

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

1つのナビゲーションがトリガされます。

内部のコンポーネントの不活性化に2つのガードを残すために呼び出します。

3コールグローバル beforeEach ガード。

通話中の成分の再利用で4 beforeRouteUpdate ガード（2.2以降）。

内部構成をルーティング5コール beforeEnter。

分析6つの非同期ルーティングコンポーネント。

7コールは、内部構成要素を活性化します beforeRouteEnter。

8コールグローバル beforeResolve ガード（2.5+）。

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

10回のコールグローバル afterEach フック。

11は、DOMの更新をトリガ。

図12は、コールする良い例により作成され beforeRouteEnter 、渡されたガード next コールバック関数を。

プロジェクト構造

二main.js

「VUE」からインポートヴュ。
以下からの輸入のApp「./App.vue」。
インポートルータ「./router」。
以下からの輸入店「./store/index」。

Vue.config.productionTip = 偽;

新しいビュー（{
  ルータ、
  格納、
  レンダリング：H => H（APP）
。}）$マウント（ "#app"）;

三App.vue

< テンプレート> 
  < div要素のid = "アプリ" > 
    < H3 >アプリケーション组件</ H3 > 
    < 時間/> 
    < ルータービュー/> 
  </ DIV > 
</ テンプレート>

< スクリプト> 
エクスポートデフォルト{}。
</ スクリプト>

< スタイルLANG = "SCSS" > 
.link { 
  マージン右：10pxの; 
} 
</ スタイル>

四router.js

「VUE」からインポートヴュ。
「VUE-ルータ」からインポートルータ。
「./views/Home.vue」からインポートホーム。
「./components/User.vue」からユーザーをインポートします。

Vue.use（ルータ）。

constのルータ=新しいルータ（{
  モード：「ハッシュ」、
  ベース：process.env.BASE_URL、
  ルート：[
    {
      パス： "/"、
      名前：「ホーム」、
      コンポーネント：ホーム、
      （次の、からの）beforeEnter {
        console.log（ "ホームルーティング排他ガード：beforeEnter"）;
        次（）;
      }
    }、
    {
      パス： "/ユーザー/：ID"、
      名前：「ユーザー」、
      コンポーネント：ユーザー、
      小道具：真、
      （次の、からの）beforeEnter {
        console.log（ "ユーザー排他的なガードをルーティング：beforeEnter"）;
        次の（VM => {
          console.log（「ホームガードルーティング排他的コールバック関数」）;
        }）;
      }
    }
  ]
}）;

router.beforeEach（（、隣から）=> {
  console.log（ "グローバルフロントガード"）;
  次（）;
}）;

router.beforeResolve（（、隣から）=> {
  console.log（ "グローバル解析ガード"）;
  次（）;
}）;

router.afterEach（（）から、へ=> {
  console.log（「グローバル後部フック」）。
}）;

輸出デフォルトルータ。

五 Home.vue

< テンプレート> 
  < divのクラス= "ホーム" > 
    < H3 >首页</ H3 > 
    < ルータリンクへ= "/ユーザー/トム" クラス= "リンク" >汤姆</ ルータ・リンク> 
    < ルータリンクへ= "/ユーザー/ジャック" クラス= "リンク" >杰克</ ルータ・リンク> 
  </ DIV > 
</ テンプレート>

< スクリプト> 
輸出デフォルト{
  名前：「ホーム」、
  （次の、からの）beforeRouteEnter {
    console.log（" ホームコンポーネントの内部にガード：beforeRouteEnter " ）;
    次の（VM => {
      console.log（「ホームコンポーネントの内部にガード：beforeRouteEnter：コールバック関数」）;
    }）;
  }、
  （次の、からの）beforeRouteUpdate {
    console.log（" ホームコンポーネントの内部にガード：beforeRouteUpdate " ）;
    次（）;
  }、
  （次の、からの）beforeRouteLeave {
    console.log（" ホームコンポーネントの内部にガード：beforeRouteLeave " ）;
    constの答え= window.confirm（
       「あなたは本当にあなたが保存されていない変更がありますか？残したいですな！」
    ）;
    もし（答え）{
      次（）;
    } 他{
      次の（偽）;
    }
  }
}。
</ スクリプト>

六 User.vue

<template>
  <div>
    <h4>{{id}}</h4>
    <button @click="$router.back()" class="link">首页</button>
    <router-link to="/user/tom" class="link">汤姆</router-link>
    <router-link to="/user/jack" class="link">杰克</router-link>
  </div>
</template>

<script>
export default {
  name: "user",
  props: ["id"],
  beforeRouteEnter(to, from, next) {
    console.log("用户组件内的守卫：beforeRouteEnter");
    next(vm => {
      console.log("用户组件内的守卫：beforeRouteEnter：回调函数");
    });
  },
  beforeRouteUpdate(to, from, next) {
    console.log("用户组件内的守卫：beforeRouteUpdate");
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log("用户组件内的守卫：beforeRouteUpdate");
    const answer = window.confirm(
      "Do you really want to leave? you have unsaved changes!"
    );
    if (answer) {
      next();
    } else {
      next(false);
    }
  }
};
</script>

七运行效果

进入首页

从首页进入用户页面（tom）

从用户页面（tom）进入用户页面（jack）

Vueのルータのルーティングガード：完全なナビゲーション解決プロセス

おすすめ