vue组件级路由钩子函数
vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)beforeRouteEnter(to, from, next):进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值。beforeRouteLeave(to, from, next):离开路由之前执行的函数,可用于页面的反向传值,页面跳转。...
vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)
beforeRouteEnter(to, from, next):进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值。
beforeRouteLeave(to, from, next):离开路由之前执行的函数,可用于页面的反向传值,页面跳转。
// 点击后拿到数据返回给下单地址
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就是组件的实例化对象。
<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。
beforeRouteUpdate(to,from,next){
console.log('beforeRouteUpdate')
next()
}
beforeRouteLeave(to,from,next)
当在about切换到user时,about页面有些数据还没有加载完成,这时候我们不让它切换到user。
beforeRouteLeave(to,from,next){//离开组件的时候触发
//什么都不写的时候,不会离开(走下一步)
next()
}
完整demo代码
<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>
更多推荐
所有评论(0)