vue がルーティングを監視するコードを実装する方法

この記事では、Vue がモニタリング ルーティングを実装する方法についてのコードを紹介します。必要な方は参考にしていただければ幸いです。

vue プロジェクトでは、実行可能なルーティング ルールが非常に重要です。これは、ユーザーがルートに入る権限を持っているかどうかを決定します。一部のルートは更新時にジャンプします。
コードのこの部分は、vue ファミリー バケットの 1 つを使用しています。ルーターによって完了します。以下の具体的な例を見てみましょう

const whiteList = ['/login']  // 路由白名单，不需要登录的路由放在这里面
router.beforeEach((to,from,next) => {  // 监听路由刷新进行跳转  
window.addEventListener('load',function () {
    console.log(from.path)    
    console.log(to.path)    
    if (to.path == '/groupwork') {
      next({ path: '/choice_course' })
    }
  })  if (store.state.token) {    
  if (to.path === '/login') { // 如果当前用户输入的是登录路由，那么就定向到 /choice_course 路由
      next('/choice_course')
    } else {      
    if (!store.state.nickname) { // 判断用户信息是否存在，不存在就拉取用户信息
        store.dispatch('GetInfo').then(res => { // 拉取用户信息
          next()
        }).catch((err) => {
          store.dispatch('FedLogOut').then(() => {  // 发生错误就直接清除token，重新登录
            next({ path: '/login' })
          })
        })
      } else {
        next()
      }
    }
  } else {    
  if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
    }
  }
})

関連する推奨事項:

Vue データ監視メソッドの使用方法 watch

vue の計算されたプロパティとリスナーのケース コード分析

以上がvue がルーティングを監視するコードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。