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点推送当天的参考答案
- 注 毫不仅限于完成当天使命,更多是查漏补缺,进修群内别的同砚优异的答题思绪