vue router導航守衛詳解

1、導航守衛是什麼？

官方是這麼說的：

正如其名，vue-router提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。

好吧，看不懂，那就好好來理解下吧。

其實，導航守衛就是路由跳轉過程中的一些鉤子函式，再說的直白點路由跳轉是乙個大的過程，這個大的過程分為跳轉前、中、後等細小的過程，在每乙個過程中都有一函式，這個函式能讓你操作一些其他的事兒，這就是導航守衛。

2、導航守衛解析

以下是鉤子函式執行後輸出的順序截圖，後面給大家一一講解

導航守衛分為：全域性的、單個路由獨享的、元件內的三種。分別來看一下：

第一種：【全域性的】

全域性的，是指路由例項上直接操作的鉤子函式，他的特點是所有路由配置的元件都會觸發（直白點就是觸發路由就會觸發這些鉤子函式），如下的寫法。鉤子函式執行順序包括beforeeach、beforresolve、aftereach三個。

const router = new
vuerouter()
router.beforeeach((to, from, next) =>)

（1）【beforeeach】

在路由跳轉前觸發，引數包括to、from、next這三個，這個鉤子作用主要是用於登入驗證，也就是路由還沒跳轉提前告知，以免跳轉了再通　　知就為時已晚。

（2）【beforeresolve】

這個鉤子和beforeeach類似，也是路由跳轉前觸發，引數也是to、from、next三個，和beforeeach區別為：在 beforeeach 和元件內 beforerouteenter 之後，aftereach之前呼叫。