// router/index.js
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    // ? 忘記調(diào)用 next(false) 或 next('/login')
    // 守衛(wèi)卡住，頁面無法跳轉(zhuǎn)
  }
  // ? 也忘記調(diào)用 next() 的成功分支
});

<script>
export default {
  // ? 錯(cuò)誤：將守衛(wèi)寫在 methods 中
  methods: {
    beforeRouteEnter(to, from, next) {
      console.log('不會(huì)執(zhí)行！');
      next();
    }
  }
};
</script>

router.beforeEach(async (to, from, next) => {
  const user = await fetchUser(); // 異步獲取用戶信息
  if (user.role !== 'admin') {
    next('/forbidden');
  }
  next(); // ? 在條件判斷外重復(fù)調(diào)用 next()
});

// router/index.js
const routes = [
  {
    path: '/admin',
    component: Admin,
    // ? 忘記添加 beforeEnter 守衛(wèi)
  }
];

// 單獨(dú)定義但未關(guān)聯(lián)
function adminGuard(to, from, next) {
  if (!isAdmin()) next('/login');
  else next();
}

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (isAuthenticated()) {
      next(); // 允許訪問
    } else {
      next('/login'); // 重定向到登錄頁
    }
  } else {
    next(); // 無需認(rèn)證，直接放行
  }
});

<script>
export default {
  // ? 正確：直接定義在組件選項(xiàng)中
  beforeRouteEnter(to, from, next) {
    // 注意：此處不能訪問 this（組件實(shí)例未創(chuàng)建）
    next(vm => {
      // vm 是組件實(shí)例，可在此設(shè)置數(shù)據(jù)
      vm.loadData();
    });
  },

  beforeRouteUpdate(to, from, next) {
    // 可訪問 this
    this.fetchData(to.params.id);
    next();
  },

  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('離開頁面將丟失未保存內(nèi)容');
    if (answer) {
      next();
    } else {
      next(false); // 取消導(dǎo)航
    }
  }
};
</script>

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (isAdmin()) {
        next();
      } else {
        next('/unauthorized');
      }
    }
  }
];

router.beforeEach(async (to, from, next) => {
  try {
    const user = await getCurrentUser();
    
    if (to.meta.requiresAdmin && user.role !== 'admin') {
      next('/forbidden');
      return; // 避免后續(xù)代碼執(zhí)行
    }
    
    next();
  } catch (error) {
    console.error('Auth check failed:', error);
    next('/error');
  }
});

全局 beforeEach → 路由獨(dú)享 beforeEnter → 組件內(nèi) beforeRouteLeave → 
解析異步路由 → 組件內(nèi) beforeRouteUpdate / beforeRouteEnter → 
全局 beforeResolve → 導(dǎo)航確認(rèn) → 全局 afterEach