路由守衛(wèi)總共有7個
全局路由守衛(wèi):
1.beforeEach 前置守衛(wèi)
2.affterEach 后置守衛(wèi)
3.beforeResolve 解析守衛(wèi)
路由的守衛(wèi)
4.beforeRouterEnter 進入組件之前觸發(fā),在Created前面
5.beforeRouterUpdated 路由更新但是內(nèi)容不會改變
6.beforeRouterLeave 離開之前觸發(fā),在beforeDestory之前觸發(fā)
路由獨享守衛(wèi)
7.beforeEnter 讀取路由的信息
一.進入一個頁面路由所執(zhí)行的鉤子
代碼:
路由的配置
console.log執(zhí)行的順序
beforeEach------------------->beforeEnter------------->beforeRouterEnter------------->beforeResolve-------->affterEach
進入前置守衛(wèi)--------------->讀取路由信息-------------->進入組件---------------->進行解析------------>進入后置守衛(wèi)妓羊。
view圖
二.全局的路由守衛(wèi)所有組件都會經(jīng)過糕再。
全局的路由守衛(wèi):
beforeEach
affterEach
beoforeResolve
點擊跳轉(zhuǎn):
路由獨享的守衛(wèi):
作用:主要是讀取當(dāng)前路由的信息锨亏。
組件的守衛(wèi):
beforeRouterEnter? 進入組件之前瓢捉。組件沒創(chuàng)建在created之前
beforeRouterUpdated? 路由更新但是內(nèi)容不會改變
beforeRouterLeave 離開組件之前嫩海,此時進入了組件菩掏,但是沒離開
三.to ,next ,from
1.to 表示要去哪里
2.from? 表示從哪里來
3.next? 表示是否方向
例子:
next(false)? 表示不能通過
next(‘/login’)表示跳轉(zhuǎn)到登錄頁面
主要點,不寫next()默認是通不過的腌巾,此時也不能進入頁面。