路由组件传参，将参数解耦

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

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

// 参数接收
props: [‘id‘],
mounted(){
      console.log(this.id,‘id‘)
    },

  {
    path: ‘/orderDetail/:id‘,
    name: ‘orderdetail‘,
    component: () => import(‘../components/orderDetail.vue‘),
    meta: { showTabbar: false},
    props:{newsletterPopup:false}  // 设置静态的props，实际项目中动态props比较多
  }

//orderDetail中参数接收
props: {
      newsletterPopup: {
        type: Boolean,
        default: false
      }
    },

mounted(){
      console.log(this.newsletterPopup,‘pop‘)
    },

  {
    path: ‘/orderDetail‘,
    name: ‘orderdetail‘,
    component: () => import(‘../components/orderDetail.vue‘),
    meta: { showTabbar: false},
    props:route =>
      ({
        newsletterPopup:false,   // 将静态的值和动态的值都进行props解耦
        query:route.query.id
      })
    
  }

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

// 参数接收
props: {
      newsletterPopup: {
        type: Boolean,
        default: false
      },
      query:{
        type: String,
        default: ‘‘
      }
    },
mounted(){
      console.log(this.newsletterPopup,‘---‘,this.query,‘pop‘)
    },