Vue でのルーティングガードの具体的な使用法

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。
'../views/Home.vue' から Home をインポートします。
'../views/About.vue' から About をインポートします。
'../views/News.vue' から News をインポートします。
'../views/Message.vue' からメッセージをインポートします。
 
Vue.use(VueRouter)
 
const ルート = [{
    パス: '/home',
    名前: 'ホーム'、
    コンポーネント: ホーム、
    子供たち：[
      {
        パス: 'message', // 書き込まないでください: /news
        コンポーネント: メッセージ
      }
    ]
  },
  {
    パス: '/about',
    名前: 'aboutName',
    コンポーネント: について、
    children: [{ //children を通じて子ルーティングを構成する path: 'news', //ここには書かないでください: /news
      コンポーネント: ニュース
    }]
  }
]
 
const ルーター = 新しい VueRouter({
  ルート
})
 
//グローバル フロント ルーティング ガード---初期化時およびルートが切り替えられるたびに呼び出されます router.beforeEach((to, from, next) => {
  console.log(に);
  //これは簡単な例です //つまり、ユーザーが認証を必要とするルートに入ったかどうかを判断します (ここでの距離はニュースとメッセージです)
  to.path == '/home/message' || to.path === '/about/news' の場合 {
    //入力した場合、情報がローカルにキャッシュされているかどうかを判断します（ここではログイントークンをシミュレートします）
    if (localStorage.getItem('name') === 'haungzhizhen') {
      次（）
    }
  }それ以外{
    //そうでない場合は、安心して next() を呼び出してください
  }
})
デフォルトルーターをエクスポートする

//メタを使用する
router.beforeEach((to, from, next) => {
  console.log(に);
  if (to.meta.isAuth){//認証が必要かどうかを判断if (localStorage.getItem('name') === 'haungzhizhen') {
      次（）
    }
  } それ以外 {
    次（）
  }
})

//グローバルなポストルートガード --- 初期化中および各ルートの切り替え後に呼び出されます router.afterEach((to, from) => {
  if (to.meta.title) {
    document.title = to.meta.title || 'ルーティングジャンプの例' //Webページのタイトルを変更する
  }それ以外{
    ドキュメントのタイトル = 'vue_test'
  }
})

const ルーター = 新しい VueRouter({
  ルート: [
    {
      パス: '/foo',
      コンポーネント: Foo、
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

定数Foo = {
  テンプレート: `...`,
  beforeRouteEnter(to, from, next) {
    // このコンポーネントをレンダリングする対応するルートが確認される前に呼び出されます // いいえ!できる！コンポーネントインスタンス `this` を取得します。
    // ガードが実行される前にコンポーネントインスタンスが作成されていないため},
  ルート更新前(to、from、next) {
    // 現在のルートが変更されたがコンポーネントが再利用されたときに呼び出されます // たとえば、動的パラメータを持つパス /foo/:id の場合、/foo/1 と /foo/2 の間を移動すると、
    // 同じ Foo コンポーネントがレンダリングされるため、コンポーネント インスタンスが再利用されます。この場合、このフックが呼び出されます。
    // コンポーネントインスタンス `this` にアクセスできます
  },
  beforeRouteLeave(to, from, next) {
    // このコンポーネントの対応するルートから移動するときに呼び出されます // コンポーネントインスタンス `this` にアクセスできます
  }
}