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

路由组件传参解耦方式：

一、布尔模式：只在params传参下有效

  {
    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')
    },

二、对象模式：props是静态时比较有用

  {
    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')
    },

三、函数模式：创建一个函数返回props，将路由传的值与静态的props值结合；对params和query传参均可

  {
    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')
    },