不采用动态路由传值与组件内的钩子函数

/* 动态路由的方式 id传过去是数字类型 刷新之后是字符串类型 / / 🔺不采用动态路由的方式 第一次id是可以发送出去的是数字类型 ★但是采用params的方式一刷新值就消失了 / / 用params传值 只能采用name的方式 不能采用path否则id就传不过去 / / params传参 参数是不会在地址栏展示出来 / this.$router.push({ name:"aboutpage", params:{ id:1000 } }) / 如果不采用动态路由的方式传值 想刷新还存在就是本地缓存的方式 / }, goVip(){ / id传过去是数字类型 刷新之后是字符串类型 / / 采用query传参的方式比params好在，刷新之后值不会消失 / / query传参可以使用path的方式而params不可以 / / 使用query传参 参数是会在地址栏上明文展示出来 */

  /* 既然写了组件内的钩子函数 里面next() 方法必须执行一次 */
/* 一进入组件立即执行 */
beforeRouteEnter:function (to,from,next){
    console.log('进入vip页面')
    // console.log('to',to.query.id)
    /* ★守卫执行前 组件实例还没有被创建 */
   /*  console.log(this) */
    /* 那么怎么获取this呢？有办法！！ */
    // next(vm=>{
    //     console.log('vm',vm.$route.query.id)
    // })
    // console.log('from',from)
    /* 一进入页面的时候 弹出alert（vip用户欢迎光临） */
    alert('vip用户欢迎光临')
    next();
},
/* 当query传参的时候 参数的值发生了变化也会执行 
因为query传参类似于get请求 组件路由更新钩子函数 */
/* ★ params传参的时候（没有配置动态路由） 是不会触发 组件路由更新钩子函数 */
/* 地址栏发生了改变 比如params传参的时候配置动态路由，地址发生变化了
/vip/001 变成了 /vip/002 会触发 */
beforeRouteUpdate:function(to,from,next){
    console.log('更新vip页面')
    // console.log('to',to)
    // console.log('from',from)
    /* 在beforeRouteUpdate的组件实例已生成可以获取this */
    // console.log(this)

    /* 如果传参的id值是1
    页面就展示 大爷你又来了 */
     /* 如果传参的id值是2
    页面就展示 大爷你别走 */
    /* 如果传参的id值不是1也不是2
    就展示请充值 */

    let id = to.query.id;
    /* ★在这里不可以使用this.$route.query.id
    因为会获取之前的id不是跳转后的id */
   /*  let id = this.$route.query.id; */

    console.log('id',id)
    if(id==1){
        this.msg = '大爷你又来了'
    }else if(id==2){
        this.msg = '大爷你别走'
    }else{
        this.msg = '大爷请充值'
    }

    next();
},
/* 离开组件立即执行 */
beforeRouteLeave:function(to,from,next){
    console.log('离开vip页面')
    // console.log('to',to)
    // console.log('from',from)
    /* 当你要离开vip页面的时候
    弹出confirm提示：'大爷再玩一会吗？'    
    判断 点击确认 则跳转 取消则不跳转*/
    if( confirm('大爷再玩一会吗？') ){
        next(false)
    }else{
        next();
    }

    /* 在beforeRouteLeave的组件实例已生成可以获取this */
    // console.log(this)
    /* next(false) 表示阻止路由跳转 */
    // next();
}

}