vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

beforeRouteEnter(to, from, next)：进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值。

beforeRouteLeave(to, from, next)：离开路由之前执行的函数,可用于页面的反向传值，页面跳转。

[code] // 点击后拿到数据返回给下单地址
beforeRouteLeave (to, from, next) {
if (to.name === 'home') {
to.query.temp = '这里是参数，选中后的地址'
}
console.log(to)
console.log(from)
next()//一定不要忘记写
},

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

beforeRouteEnter(to,from,next)

        beforeRouteEnter 函数内部 this 是undefined，这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate。我们可以通过 next 获取组件的实例对象，如：next( (vm)=>{} )，参数vm就是组件的实例化对象。

[code]<template>
<div>
我是about
<hr>
<ul class="subnave f-cb">
<router-link :to='{name:"About"}' exact tag="li">
<a>study</a>
</router-link>
<router-link :to='{name:"Work"}' tag="li">
<a>work</a>
</router-link>
<router-link :to='{name:"Hobby"}' tag="li">
<a>hobby</a>
</router-link>
</ul>
测试数据：{{test}}
<router-view></router-view>
</div>
</template>

<script>
export default {
data(){
return {
test:'改变之前'
}
},
beforeCreate(){//组件生命周期函数
console.log('beforeCreate')
},
//当进入组件之前，执行 beforRouteEnter 路由钩子函数
beforeRouteEnter(to,from,next){
console.log('beforRouteEnter')
console.log(this) // 结果为undefined，因为在执行beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行beforeCreate
next((vm)=>{ //参数vm就是当前组件的实例。
vm.test = '我被改变了'
})
}
}
</script>

beforeRouteUpdate(to,from,next)

About组件是有二级导航的，在切换二级导航的时候，对应的内容是在变化的；但是about组件是复用的，只会生成一次，切换二级导航的时，如何知道导航在更新呢？

 一个组件有二级导航的时候，点击二级导航的时候导航路径更新了，会触发路由钩子函数beforeRouteUpdate。

[code]beforeRouteUpdate(to,from,next){
    console.log('beforeRouteUpdate')
    next()
}

beforeRouteLeave(to,from,next)

当在about切换到user时，about页面有些数据还没有加载完成，这时候我们不让它切换到user。

[code]beforeRouteLeave(to,from,next){//离开组件的时候触发
    //什么都不写的时候，不会离开(走下一步)
    next()
}

完整demo代码

[code]<template>
<div>
我是about
<hr>
<ul class="subnave f-cb">
<!-- a标签中href属性不需要写地址，页面编译完成后自动会在href中加入对应的路劲 -->
<router-link :to='{name:"About"}' exact tag="li">
<a>study</a>
</router-link>
<router-link :to='{name:"Work"}' tag="li">
<a>work</a>
</router-link>
<router-link :to='{name:"Hobby"}' tag="li">
<a>hobby</a>
</router-link>
</ul>
测试数据：{{test}}
<router-view></router-view>
</div>
</template>

<script>
export default {
data(){
return {
test:'改变之前'
}
},
beforeCreate(){//组件生命周期函数
console.log('beforeCreate')
},
//当进入组件之前，执行 beforRouteEnter 路由钩子函数
beforeRouteEnter(to,from,next){
console.log('beforRouteEnter')
console.log(this) // 结果为undefined，因为在执行beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行beforeCreate
next((vm)=>{ //参数vm就是当前组件的实例。
vm.test = '我被改变了'
})
},
beforeRouteUpdate(to,from,next){
console.log('beforeRouteUpdate')
next()
},
beforeRouteLeave(to,from,next){//离开组件的时候触发
//什么都不写的时候，不会离开(走下一步)
next()
}
}
</script>