【笔记】vue3.x 组件props接收路由参数

在开发过程中，希望用组件的props接收路由的参数。

直接写在路径中传递

假设路径：/user/u123456

route中的设置如下，路径中的参数用:修饰，props设置为true

const routes = [
  {
    path: '/user/:id',
    component: () => import('@/views/user/index.vue'),
    props: true
  }
]

在组件的props中声明路径中的变量即可

export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  }
}

通过query传递

假设路径：/user?id=u123456

route中的设置如下，props将query的数据进行声明

const routes = [
  {
    path: '/user',
    component: () => import('@/views/user/index.vue'),
    props: route => ({
      id: route.query.id
    })
  }
]

在组件的props中声明query中的变量即可

export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  }
}