路由钩子函数(导航守卫)

2019-08-08  本文已影响0人  简单tao的简单
概念

导航发生变化时,导航钩子主要用来拦截导航,让它完成跳转或取消

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。

全局的

前置守卫 router.beforeEach

使用场景 - 未登录去下单,跳转到登录页

// main.js
// 在进入路由之前 每一次都会执行此方法 全局钩子  路由拦截
router.beforeEach(function(to,from,next){  //to:将要去的页面 from:离开的页面
  if(to.path==='/list'){ 
    next({path:'/add'})  //跳到add页面
  }else{ 
    next();
  }
})

后置钩子router.afterEach

使用场景 - 改变浏览器title

router.afterEach((to, from) => {
   document.title=to.meta.title;
})
//不会改变导航本身
单个路由独享的

beforeEnter

与全局前置守卫router.beforeEach的方法参数是一样的

//在路由配置上直接定义 beforeEnter 守卫
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        if(to.path==='/list'){ 
          next({path:'/add'})  //跳到add页面
        }else{ 
          next();
        }
      }
    }
  ]
})
组件级的

进入组件前beforeRouteEnter

使用场景 - 进入这个组件前你要做什么初始化操作

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 `this`
    // 因为当守卫执行前,组件实例还没被创建
    next(vm => {
    // 通过 `vm` 访问组件实例
    })
  },
}
//参数同beforeEach

组件更新或改变时beforeRouteUpdate

使用场景 - 复用组件时(对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候)

const Foo = {
  template: `...`,
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    this.name = to.params.name
    next()
  },
}
//参数同beforeEach

离开组件时beforeRouteLeave

使用场景
1.清除定时器
2.用户在还未保存修改前突然离开提示等等

const Foo = {
  template: `...`,
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
    if (answer) {
        next()
    } else {
        next(false)
    }
  }
}
//参数同beforeEach
完整的导航解析流程
  1. 导航被触发。
  2. 在失活的组件里调用离开守卫beforeRouteLeave
  3. 调用全局的 beforeEach守卫。
  4. 在重用的组件里调用beforeRouteUpdate守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的afterEach 钩子。
  11. 触发 DOM 更新。
  12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
上一篇 下一篇

猜你喜欢

热点阅读