params  不使用动态路由 传参 刷新不显示的问题

<button @click="goAbout">跳转about</button> |


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

query传参的话刷新还在，但是会显示在这上面 params传参不会

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

 路由返回上一页 刷新 下页 替换

 <a @click="goBack" href="javascript:;">返回上一页</a> |
      <a @click="shuaxin" href="javascript:;">刷新</a> |
      <a @click="goNext" href="javascript:;">返回下一页</a> |
      <a @click="goReplace" href="javascript:;">替换当前页</a>


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

利用路由元信息 实现 管理员和普通用户的 身份切换

在index.js里配置

 {
    path: '/vipview',
    name: 'vipView',
    component: () => import(/* webpackChunkName: "about" */ '../views/vipView.vue'),
    meta:{
      title:"路由元信息页面",
      flag:true
    }

在组件中显示

export default {
    data(){
        return {
            msg:""
        }
    },
    methods(){
        document.title=this.$route.meta.title
        if(this.$route.meta.flag){
            this.msg="欢迎管理员"
        }
        else{this.msg="没有权限"}
    }
}