Vue中的路由传值及路由勾子函数执行顺序

路由基本传值

   传：
      this.$router.push('/path地址?参数名=参数值&参数2=值2')
      this.$router.push({
          path:'/path地址',
          query:{
              参数名:值
          }
      })
   收
     this.$route.query.参数名

  动态路由匹配

   配制路由
     {
         path:'/xxx/:参数名?'  ?代表参数值可传可不传
     }
   传：
      this.$router.push('/xxx/值')
   收：
     this.$route.params.参数名===值

 
 name传参

    配制路由
       {
           path,
           component,
           name:'abc'
       }
     传
        this.$router.push({
            name:'abc',
            query:{
                参数名：参数值
            }
        })
       this.$router.push({
            name:'abc',
            params:{
                参数名：参数值
            }
        })
     这种传值方式它不会在url体现，它的值存储在内存中，刷新就没了，优点：不受长度与数据类型影响（类似post传值）
        
      接：this.$route.query.参数名
          this.$route.params.参数名
      
      

全局路由勾子

•     beforeEach:前置守卫
•     beforeResolve:解析勾子
•     afterEach:已进入相应路由时执行

路由所对应组件勾子

• beforeRouteEnter:进入前
•   beforeRouteUpdate:更新前
•   beforeRouteLeave:路由离开前

     beforeRouteEnter:进入前：在beforeCreate之前执行，不能使用this
        beforeRouteEnter((to,from,next)=>{
            next((vm)=>{
                vm:当前组件的实例对象
            })
        })
    beforeRouteUpdate:更新前，路由更新了，路由所对应组件不变时执行
        注意：它是更新前，如果获取当前路由，它是更新前的路由信息，如果要
        获取更新后的使用this.$nextTick(()=>{获取更新后的})
    beforeRouteLeave:路由离开前

 路由配制所对应勾子
    beforeEnter:读取路由配制时执行
    
    
执行先后
   beforeEach===>beforeEnter===>beforeRouteEnter===>beforeResolve===>afterEach
更新时执行先后
   beforeEach===>beforeRouteUpdate===>afterEach
   
beforeDestroy执行时间节点：
A路由跳转到B路由时它们A组件与B组件执行的生命周期勾子
beforeCreate(B)===>created(B)===>beforeMount(B)===>beforeDestroy(A)===>
destroyed(A)===>mounted(B)
父组件与子组件生命周期执行先后
beforeCreate(父)===>created(父)===>beforeMount(父)===>beforeCreate(子)===>
created(子)===>beforeMount(子)===>mounted(子)===>mounted(父)