next 介紹
- 但凡涉及到有參數(shù)的鉤子,必須調(diào)用next()才能繼續(xù)往下執(zhí)行下一個(gè)鉤子,否則路由跳轉(zhuǎn)等會(huì)停止。
- 如果要中斷當(dāng)前的導(dǎo)航要調(diào)用next(false)。如果瀏覽器的 URL 改變了 (可能是用戶手動(dòng)或者瀏覽器后退按鈕),那么 URL 地址會(huì)重置到from路由對(duì)應(yīng)的地址。(主要用于登錄驗(yàn)證不通過(guò)的處理)
- 當(dāng)然next可以這樣使用,
next('/')或者next({ path: '/' })跳轉(zhuǎn)到一個(gè)不同的地址。意思是當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航。可傳遞的參數(shù)與router.push中選項(xiàng)一致。 - 在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;
})