“约见”面试官系列之常见面试题之第七十六篇之vue-router中的路由钩子函数基本用法 （建议收藏）

vue-router中的路由钩子函数基本用法

路由钩子函数分为三种类型如下：

　　第一种：全局钩子函数。

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

　　　　console.log('beforeEach')

　　　　//next() //如果要跳转的话，一定要写上next()

　　　　//next(false) //取消了导航

　　　　next() //正常跳转，不写的话，不会跳转

　　})

　　router.afterEach((to, from) => { // 举例: 通过跳转后改变document.title

　　　　if( to.meta.title ){

　　　　　　window.document.title = to.meta.title //每个路由下title

　　　　}else{

　　　　　　window.document.title = '默认的title'

　　　　}

　　})

　　第二种：针对单个路由钩子函数

　　beforeEnter(to, from, next){

　　　　console.log('beforeEnter')

　　　　next() //正常跳转，不写的话，不会跳转

　　}

　　第三种：组件级钩子函数

　　beforeRouteEnter(to, from, next){ // 这个路由钩子函数比生命周期beforeCreate函数先执行，所以this实例还没有创建出来

　　　　console.log("beforeRouteEnter")

　　　　console.log(this) //这时this还是undefinde，因为这个时候this实例还没有创建出来 

　　　　next((vm) => { //vm,可以这个vm这个参数来获取this实例,接着就可以做修改了

　　　　　　vm.text = '改变了'

　　　　})

　　},

　　beforeRouteUpdate(to, from, next){//可以解决二级导航时，页面只渲染一次的问题，也就是导航是否更新了，是否需要更新

　　　　console.log('beforeRouteUpdate')

　　　　next();

　　},

　　beforeRouteLeave(to, from, next){// 当离开组件时，是否允许离开

　　　　next()

　　}

本面试题为前端常考面试题，后续有机会继续完善。我是歌谣，一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总（建议学习收藏）