vue-router传参的几种方式

第一种：需要在路径上配置动态参数，刷新页面参数不会丢失

//路由配置
{
    path: '/orderDetail/:id',
    name: 'orderdetail',
    component: () => import('../components/orderDetail.vue'),
    meta: { showTabbar: false}
  }

//传参
gotoDetail(){
        this.$router.push({path:`/orderDetail/${this.id}`})
  }

//接收参数
console.log(this.$route.params,'route')

 第二种：带查询参数?id=123，

//路由配置
{
    path: '/orderDetail,
    name: 'orderdetail',
    component: () => import('../components/orderDetail.vue'),
    meta: { showTabbar: false}
  }

//传参
gotoDetail(){
        this.$router.push({path:`/orderDetail`,query:{id:this.id}})
  }

//接收参数
console.log(this.$route.query,'route')

 第三种：name，pramas；刷新页面参数丢失

//路由配置
{
    path: '/orderDetail,
    name: 'orderdetail',
    component: () => import('../components/orderDetail.vue'),
    meta: { showTabbar: false}
  }

//传参
gotoDetail(){
       this.$router.push({name:`orderdetail`,params:{id:this.id}})
  }

//接收参数
console.log(this.$route.params,'route')

// 此时可以在路径上配置这个参数，这样刷新页面参数就不会丢失了

{
    path: '/orderDetail/:id,
    name: 'orderdetail',
    component: () => import('../components/orderDetail.vue'),
    meta: { showTabbar: false}
  }