VUE解決路由守衛(wèi)白屏

next 介紹

  1. 但凡涉及到有參數(shù)的鉤子,必須調(diào)用next()才能繼續(xù)往下執(zhí)行下一個(gè)鉤子,否則路由跳轉(zhuǎn)等會(huì)停止。
  2. 如果要中斷當(dāng)前的導(dǎo)航要調(diào)用next(false)。如果瀏覽器的 URL 改變了 (可能是用戶手動(dòng)或者瀏覽器后退按鈕),那么 URL 地址會(huì)重置到from路由對(duì)應(yīng)的地址。(主要用于登錄驗(yàn)證不通過(guò)的處理)
  3. 當(dāng)然next可以這樣使用,next('/')或者 next({ path: '/' }) 跳轉(zhuǎn)到一個(gè)不同的地址。意思是當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航。可傳遞的參數(shù)與router.push中選項(xiàng)一致。
  4. 在beforeRouteEnter鉤子中next((vm)=>{})內(nèi)接收的回調(diào)函數(shù)參數(shù)為當(dāng)前組件的實(shí)例vm,這個(gè)回調(diào)函數(shù)在生命周期mounted之后調(diào)用,也就是,他是所有導(dǎo)航守衛(wèi)和生命周期函數(shù)最后執(zhí)行的那個(gè)鉤子。
const router = new Router({
nroutes:[]
//beforEach全局前置守衛(wèi)
//to目標(biāo)路由對(duì)象
//from即將要離開(kāi)的路由對(duì)象
//next它是最重要的一個(gè)參數(shù),相當(dāng)于佛珠的線,把一個(gè)一個(gè)珠子逐個(gè)串起來(lái)。
router.beforeEach((to, from, next) => {
  try {
    let uid = localStorage.getItem('uid');
    if (uid) {
      next('/manage/dhcpOption')
    } else {
      //沒(méi)有登錄,判斷跳轉(zhuǎn)地址是否為login,防止白屏
      if (to.path === '/login') {
        next();
      } else {
        next({
          path: '/login'
        } );
      }
    }
  } catch (err) {
    console.error(err);
  }
})
export default router;
})

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容