Vue 路由传参，路由守卫

路由query传参

        App页面传参name
        <router-link to="/cldA?name=xx">CldA-1</router-link>|
        <router-link to="/cldA?name=yy">CldA-2</router-link>|
        
        
        子组件watch深度监听            
        watch:{
          $route:{
             handler:function(){
             let name=this.$route.query.name
             if(name=='xx'){
                this.msg='BBQ'
             }else if(name=='yy'){
                this.msg='CCQ'
             }else{
                this.msg='请充钱'
             }
          },
          //一进入页面就监听
           immediate:true
          }
       }
    
    

动态路由params传参

    index.js文件
          {
            path: '/cldB/:id',
            name: 'cldB',
            props:true,
            component: () => import('../views/CldB.vue'),
          }
     App页面
        <router-link to="/cldB/1">CldB-1</router-link>|
        <router-link to="/cldB/2">CldB-2</router-link>|
     子组件
     props:['id']
        ,
        watch:{
          $route:{
             handler:function(){
                 if(this.$route.params.id==1){
                     this.msg='我是1号'
                 }else if(this.$route.params.id==2){
                     this.msg='我是2号'
                 }else{
                      this.msg='我是3号'
                 }
             },
            immediate:true
          },
        }

           /* 跳转页面两种写法 */
 this.$router.push('/about') 地址path
 this.$router.push({name:'about'}) 地址name

全局路由守卫

    index.js页面编写   
    全局路由守卫先触发beforeEach再触发afterEach

局部路由守卫（局部路由钩子函数）

    指定进入/cldA的时候触发，是局部钩子