Wie vue den Code zur Überwachung des Routings implementiert

Dieser Artikel zeigt Ihnen, wie Vue das Monitoring-Routing implementiert. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

Im Vue-Projekt ist eine praktikable Routing-Regel sehr wichtig. Sie bestimmt, ob der Benutzer die Berechtigung hat, die Route einzugeben, und einige Routen müssen beim Aktualisieren usw. springen.
Dieser Teil des Codes wird verwendet Es wird durch einen Router vervollständigt, einer der Buckets der Vue-Familie. Schauen wir uns die folgenden spezifischen Beispiele an

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

Verwandte Empfehlungen:

So verwenden Sie die Vue-Datenüberwachungsmethode

Vue berechnete Eigenschaften und Listener-Case-Code-Analyse

Das obige ist der detaillierte Inhalt vonWie vue den Code zur Überwachung des Routings implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!