グローバルルートガードの適用

プレルート ガード router.beforeEach

ページにログインが必要かどうかを判断する

1 ルートにメタ isToken を設定して、ページに入るためにログインする必要があるかどうかを決定します

{
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue'),
    meta: {
      title: '登录',
      isToken: false
    },
  },

2 フロントガードジャッジメント

router.beforeEach((to, from, next) => {
 // 获取token
  let token = localStorage.getItem('token')
  if (token && token != 'null') {  //有token  放行
    next()
  } else {
   // 判断该页面是否需要登录
    if (to.meta.isToken) {  //为true 表示需登录才能进入的页面
      Toast('请先登录');
   // 返回登录页面
      next('/login')
    } else {
      next()
    }
  }
})

ポストルーティングフック router.afterEach

動的なタイトルを設定する

1 上図のように、メタファイルにtitle属性を設定します。

meta: {
      title: '登录',
      isToken: false
    },

2 ポストルートガード設定

router.afterEach((to, from, next) => {
  document.getElementById('titleId').innerHTML = to.meta.title
})

グローバルパーシングガード router.beforeResolve

 すべてのコンポーネント内ガードと非同期ルーティングされたコンポーネントが解決された後、ナビゲーションが確認される前に、解決ガードが呼び出されます。