JS逐日一题：Vue-router有哪些钩子？运用场景？

2019年8月31日 197次阅读 来源: febobo

20190218问

Vue-router有哪些钩子？运用场景？

router的完成能够点
这里

前面我们用大白话讲过什么是钩子，这里在反复一下，就是在什么什么之前,什么什么以后,英文叫hooks,专业点叫生命周期，装逼点能够叫守御…

vue-router中也存在钩子的观点,分为三步影象

  • 全局守御
  • 路由独享守御
  • 组件独享守御
全局守御

很好明白，全局守御就是能监听到全局的router行动

  • router.beforeEach 路由前置时触发
const router = new VueRouter({ ... })
// to 要进入的目的路由对象
// from 当前的路由对象
// next resolve 这个钩子，next实行结果由next要领的参数决议
// next() 进入管道中的下一个钩子
// next(false) 中缀当前导航
// next({path}) 当前导航会中缀，跳转到指定path
// next(error) 中缀导航且毛病传递给router.onErr回调
// 确保前置守御要挪用next，否然钩子不会进入下一个管道
router.beforeEach((to, from, next) => {
  // ...
})
  • router.afterEach 路由后置时触发
// 与前置守御基础雷同，差别是没有next参数
router.afterEach((to, from) => {
  // ...
})
  • router.beforeResolve

跟router.beforeEach相似,在所有组件内守御及异步路由组件剖析后触发

路由独享守御

参数及意义同全局守御，只是定义的位置差别

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Demo,
      beforeEnter: (to, from, next) => {
        // ...
      },
      afterEnter: (to, from, next) => {
        // ...
      },
      
    }
  ]
})
组件独享守御

组件内新一个守御, beforeRouteUpdate,在组件能够被复用的情况下触发，如 /demo/:id, 在/demo/1 跳转/demo/2的时刻，/demo 能够被复用，这时会触发beforeRouteUpdate

const Demo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    ...
  },
  // 在当前路由转变，然则该组件被复用时挪用
  beforeRouteUpdate (to, from, next) {
    ...
  },
  beforeRouteLeave (to, from, next) {
    ...
  }
}
  • 注意在beforeRouteEnter前不能拿到当前组件的this，由于组件另有被建立，我们能够经由过程next(vm => {console.log(vm)}) 回传当前组件的this举行一些逻辑操纵

运用场景

路由进入前最典范的能够做一些权限掌握, 路由脱离时消灭或存储一些信息,使命等等

总结

vue-router中钩子分为全局的，部分的，以及组件三种情势, 他们都有前置守御以及后置守御, 个中组件的前置守御不能拿到当前组件的this，因组件还没有被建立，能够经由过程next的参数举行回传this，前置守御必需挪用next要领，不然不会进入下一个管道

关于JS逐日一题

JS逐日一题能够看成是一个语音答题社区
天天应用碎片时候采纳60秒内的语音情势来完成当天的考题
群主在越日0点推送当天的参考答案

  • 注 毫不仅限于完成当天使命，更多是查漏补缺，进修群内别的同砚优异的答题思绪

点击到场答题

    原文作者：febobo
    原文地址: https://segmentfault.com/a/1190000018199848
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞