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>

 

Logo

前往低代码交流专区

更多推荐