【快速入门Vue系列】第三十四篇:全局守卫和路由独享守卫(导航守卫篇)

语言: CN / TW / HK

theme: qklhk-chocolate

VueRouter_导航守卫

导航:路由正在发生变化。

导航守卫主要用来通过跳转或取消的方式守卫导航。

导航守卫被分成三种:全局的、单个路由独享的、组件内的。

全局守卫

是指路由实例上直接操作的钩子函数,触发路由就会触发这些钩子函数。

vue-router全局有三个守卫

  • router.beforeEach :全局前置守卫,进入路由之前
  • router.beforeResolve :全局解析守卫,在beforeRouteEnter调用之后调用(不常用)
  • router.afterEach :全局后置钩子,进入路由之后

全局前置守卫 beforeEach

在路由跳转前触发,一般被用于登录验证。

```js const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => { // ... }) ```

参数说明:

  • to 目标路由对象

  • from 即将要离开的路由对象

  • next 三个参数中最重要的参数。

    • 必须调用next(),才能继续往下执行一个钩子,否则路由跳转会停止
    • 若要中断当前的导航,可以调用next(false)。
    • 可以使用next跳转到一个不同的地址。终端当前导航,进入一个新的导航。next参数值和$routet.push一致。
    • next(error)。2.4+,如果传入的参数是一个Error实例,则导航会被终止,且该错误会被传递给router.onError() 注册过的回调。

全局解析守卫 beforeResolve

和boforeEach类似,路由跳转前触发。

和beforeEach的区别:在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。

```js const router = new VueRouter({ ... })

router.beforeResolve((to, from, next) => { // ... }) ```

全局后置钩子 afterEach

和beforeEach相反,路由跳转完成后触发。

```js const router = new VueRouter({ ... })

router.afterEach((to, from) => { // ... }) ```

路由独享守卫

是指在单个路由配置的时候也可以设置的钩子函数。

beforeEnter

和beforeEach完全相同,如果都设置则在beforeEach之后紧随执行。

js const router = new VueRouter({ routes: [ { path: '/home', component: Home, beforeEnter: (to, from, next) => { // ... } } ] })

最后

如果对您有帮助,希望能给个👍评论/收藏/三连!

博主为人老实,无偿解答问题哦❤