Vue.js 通过路由器链路传递道具

我是Vue 3路由器方面的新手，因此非常需要帮助。 我正试图通过路由器链接传递道具

所以，我有一个组件柱，其中支柱柱是一个对象

Post.vue

export default defineComponent({
  name: 'Post',
  props: {
    post: {
      type: Object as PropType<Post>,
      required: true,
    },
  },

export default defineComponent({
  name: 'EditPostForm',
  props: {
    post: {
      type: Object as PropType<Post>,
      required: true,
    },
  },

<router-link
  class="..."
  :to="{
     path: '/post/edit',
     props: post,
     query: { post: post.id },
   }"
   >Edit
</router-link>

导出默认定义组件({
姓名:"职位",，
道具：{
职位：{
类型：对象作为PropType，
要求：正确，
},
},

我有一个组件EditPostForm，其中的对象应该与Post组件中的对象完全相同

EditPostForm.vue

export default defineComponent({
  name: 'Post',
  props: {
    post: {
      type: Object as PropType<Post>,
      required: true,
    },
  },

export default defineComponent({
  name: 'EditPostForm',
  props: {
    post: {
      type: Object as PropType<Post>,
      required: true,
    },
  },

<router-link
  class="..."
  :to="{
     path: '/post/edit',
     props: post,
     query: { post: post.id },
   }"
   >Edit
</router-link>

导出默认定义组件({
名称：'EditPostForm'，
道具：{
职位：{
类型：对象作为PropType，
要求：正确，
},
},

这就是Post组件中的路由器链接

Post.vue

export default defineComponent({
  name: 'Post',
  props: {
    post: {
      type: Object as PropType<Post>,
      required: true,
    },
  },

export default defineComponent({
  name: 'EditPostForm',
  props: {
    post: {
      type: Object as PropType<Post>,
      required: true,
    },
  },

<router-link
  class="..."
  :to="{
     path: '/post/edit',
     props: post,
     query: { post: post.id },
   }"
   >Edit
</router-link>

编辑

路由器/索引.ts

{
    path: '/post/edit',
    name: 'Edit Post',
    component: EditPostForm,
    props: Object as PropType<Post>,
},

{
路径：'/post/edit'，
名称：“编辑帖子”，
组件：EditPostForm，
props：对象作为PropType，
},

我犯了一个错误

错误

[Vue warn]: Missing required prop: "post" 
  at <EditPostForm fullPath="/post/edit?post=3" hash="" query= {post: "3"}  ... > 
  at <RouterView> 
  at <App>

[Vue warn]：缺少必需的道具：“post”
在
在
在

据我所知，您不能使用

直接传递道具，但您可以设置

vue路由器

将路由

参数

作为

道具

传递到组件：

{
路径：'/post/edit/:prop1/:prop2/:prop3'，//将所需的道具设置为url中的参数
名称：“编辑帖子”，
组件：EditPostForm，
props:true，//将props设置为true，这将作为props传递url参数
},

然后，在模板中，您可以在

：to

中指定

参数

属性：

编辑

还可以通过

对象模式

或

功能模式

传递道具

---

对象模式没有帮助，因为它主要用于静态道具，但如果我上面提供的内容不适用于您的用例，您可能可以使用函数模式。

没有帮助。获取错误信息：

没有找到与路径/post/edit/“

和

路径/post/edit/”匹配的位置已与参数一起传递，但它们将被忽略。请改为在参数旁边使用命名路由。

但感谢您的响应！@kadeikin您是否已将路由器/index.ts中的路径设置为“/post/edit/：post”。此外，在上面的路由器链接中：参数应为{post}不post@priosshrsth是的，我做了。

path:'/post/edit/:post'

和

path:'/post/edit'，params:{post}，

@kadeikin您是否也在

router/index.ts

中更改了set

props:true

？在路由器配置中，

props

是一个布尔值，但您已将其设置为

对象为PropType

@tony19是的，我做了