路由基本使用&路由传值&路由钩子函数

路由基本使用

1：安装   yarn add vue-router
2:导入
    src/router/index.js
    import VueRouter from 'vue-router'
3:注册
import Vue from 'vue'
   Vue.use(VueRouter)
4:实例化
  const router=new VueRouter({
      routes:[
          {
              path:'/',
              components:{
                  default:组件,    router-view  name='default'
                  其它名字:组件      router-view name='其它名字'
              }，
              alias:别名(/home)
              meta:路由元
              redirect:重定向，
              children....
          }
      ]
  })
 5:暴露出去  export default router
 6:挂载
   import router from '@/router'
   new Vue({
       router
   })
  7:路由出口
     router-view

路由传值

1.基本传值
   传：
      this.$router.push('/path地址?参数名=参数值&参数2=值2')
      this.$router.push({
          path:'/path地址',
          query:{
              参数名:值
              、。。。
          }
      })
   收
     this.$route.query.参数名
     
     
2.动态路由传值
   配制路由
     {
         path:'/xxx/:参数名?'  ?代表参数值可传可不传
     }
   传：
      this.$router.push('/xxx/值')
   收：
     this.$route.params.参数名===值
 
 3.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:进入前，在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(父)