Comment vue implémente le code pour surveiller le routage

Cet article vous présente le code sur la façon dont Vue implémente le routage de surveillance. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Dans le projet vue, une règle de routage réalisable est très importante. Elle détermine si l'utilisateur a la permission de saisir l'itinéraire, et certains itinéraires doivent sauter lors de l'actualisation, etc.
Cette partie du code. est utilisé Il est complété par un routeur, l'un des buckets de la famille Vue. Regardons les exemples spécifiques ci-dessous

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')
    }
  }
})

Recommandations associées :

Comment utiliser la méthode de surveillance des données Vue. regarder

Propriétés calculées de Vue et analyse du code de cas d'écoute

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!