路由导航
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航(相当于一个保安)。我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录。为此我们有很多种方法可以植入路由的导航过程:全局的, 单个路由独享的, 或者组件级的。
注:参数或查询的改变并不会触发进入/离开的导航守卫 (你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。)
全局守卫
-
他的特点是所有路由配置的组件都会触发,直白点就是触发路由就会触发这些钩子函数.
-
vue-router全局有三个守卫:
-
router.beforeEach 全局前置守卫 进入路由之前
-
router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
-
router.afterEach 全局后置钩子 进入路由之后
-
beforeEach
在路由跳转前触发,参数包括 to , from , next(参数会单独介绍)三个,这个钩子作用主要是用于登录验证,也就是路由还没跳转提前告知,以免跳转了再通知就为时已晚。
to,from,next 这三个参数
-
to: Route: 即将要进入的目标 路由对象即 this. r o u t e , 如 : t o . p a t h 和 t h i s . route, 如: to.path 和 this. route,