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>

1. vue-router全局钩子函数
beforeEach和afterEach是vue-router实例对象的属性
特别提醒：每次路由跳转，都会执行beforeEach和afterEach
beforeEach

var router=new Router({
  routes: [
    {
      path: '/',
      name: 'Chat',
      component: Chat
    }
  ]
});

router.beforeEach有三个参数：to/from/next

router.beforeEach(function (to,from,next) {
  console.log(to);//到达的路由
  console.log(next);//管道中，可以跳转到其他路由
  console.log(from);//离开的路由
  next();
})

router.afterEach有两个参数：to/from

router.afterEach(function (to,from) {
  console.log(to);//到达的路由
  console.log(from);//离开的路由
})

2. 单个路由钩子函数beforeEnter
beforeEnter有三个参数：to/from/next

{
      path: '/',
      name: 'Login',
      component: Login,
      beforeEnter: (to, from, next) => {
        console.log("我即将进入login1111111111111");
        next();
      }
    },

3.组件内钩子函数
beforeRouteEnter+beforeRouteUpdate+beforeRouteLeave
都有三个参数：to/from/next
beforeRouteEnter:进入这个组建路由之前
beforeRouteLeave：离开这个组建路由
特别注意：
beforeRouteUpdate：再本路由的下级路由切换才会触发beforeRouteUpdate

    methods:{
      success:function(){
        this.$router.push({ path: '/chat' });
      },
    },
    computed:{

    },
    beforeRouteEnter:function(to,from,next){
      console.log("进入这个组建1111111");
      next()
    },
    beforeRouteUpdate:function(to,from,next){
      console.log("在二级导航里面切换了22222");
      next()
    },
    beforeRouteLeave:function(to,from,next){
      console.log("离开这个组建更新3333333");
      next()
    },

参考：https://blog.csdn.net/csdn_yudong/article/details/113035397 

 结果：

通常我们在父组件中的mounted中执行initMap（）来初始化地图对象（其他钩子函数中执行initMap()将不会渲染出地图），而在上面的测试中我们可以看到子组件的mounted要比父组件的mounted先执行，导致子组件中获取的map为空对象。因此现在我们要考虑一种方式，可以先执行父组件的mounted，后执行子组件的mounted（只有这样子组件中才能获取父组件传过来的Map对象）。

  beforeMount() {
    // _isMounted是当前实例mouned()是否执行 此时为false
    window.parentMounted = this._isMounted;
  },
  mounted() {
    //父组件中初始化地图对象map
    //this.initMap();//在这里执行初始化操作
    // _isMounted是当前实例mouned()是否执行 此时为true
    window.parentMounted = this._isMounted;
  },

  mounted() {
    let pMountedTimer = {}; //定时器
    pMountedTimer = setInterval(() => {
      if (window.parentMounted) {
        //在这里执行初始化
        this.addDrawLayer();

        clearInterval(pMountedTimer); //清除定时器
      }
    }, 1000);
  },

此外，还可以先不加载子组件，即最开始先把子组件的v-if设为false，想使用子组件时直接把子组件v-if设为true即可