vue가 라우팅 모니터링을 위한 코드를 구현하는 방법

이 기사는 Vue가 모니터링 라우팅을 구현하는 방법에 대한 코드를 제공합니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

vue 프로젝트에서는 사용자가 경로에 들어갈 수 있는 권한이 있는지, 새로 고칠 때 일부 경로를 점프해야 하는지 등을 결정하는 실행 가능한 라우팅 규칙이 매우 중요합니다.
이 부분. 코드는 Vue 패밀리 버킷 중 하나인 라우터를 사용하여 완성됩니다. 아래의 구체적인 예를 살펴보겠습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!