router3

params传参

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

如果不采用动态路由的方式传值 想刷新还存在就是本地缓存的方式

 created(){
        /* 第一次拿到id的时候 就存在本地缓存中 */
        if(this.$route.params.id){
            localStorage.id = this.$route.params.id;
        }
        /* 如果刷新页面this.$route.params.id的值为undefined 则为false
        就取本地缓存中的id的值 */
        let id = this.$route.params.id||localStorage.id;
        console.log(id)
    },

query传参

 /* id传过去是数字类型 刷新之后是字符串类型 */
      /* 采用query传参的方式比params好在，刷新之后值不会消失 */
      /* query传参可以使用path的方式而params不可以 */
      /* 使用query传参 参数是会在地址栏上明文展示出来 */
      this.$router.push({
        path:"/vip",
        query:{
          id:2000
        }
      })

页面的前进后退刷新替换

goBack(){
            /* 返回上一页 */
            /* this.$router.back(); */
            this.$router.go(-1)
        },
        shuaxin(){
            /* 刷新当前页面 */
            // this.$router.go(0)
            this.$router.push('/vip')
        },
        goNext(){
            /* 去下一页 */
            /* this.$router.go(1) */
            this.$router.forward();
        },
        goReplace(){
            /* 把当前页页面销毁了，自己取而代之 */
            /* 替换当前页为vip页面 */
            this.$router.replace('/vip')
        }

钩子函数：

 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();
    }