一：params传参

• 第一种：动态路由的方法传参 this.$route.params.id获取id值 当页面再次刷新id值不变 第一次传过去的id值是数字类型 再次刷新是字符串类型

• 第二种：不用动态方式的params方式传参，id的值再次刷新会消失变为underfind 如果解决呢？需要把id的值存在本地缓存

二：query传参

• query方式传过去 刷新id值不会消失，query方式path和name都可以使用

三：☆params传参和query传参的区别：

• params直接传参，页面再次刷新值就会消失，query方式传参不会
• params传参，只能采用name的方式，query方式name和path都可以
• params参数 参数值不会现在在地址栏上 安全性好类型post ，query类似get地址栏显示参数
• 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();
}

六：路由元信息

• 在$route这个路由对象信息，里面的都是路由的自身的属性，有一个meta这个对象中，在这里面可以写程序员想要存的，就是路由元信息