Vue Router路由视图传递对象Prop失败，请求排查问题

我尝试从MyFormsView传递完整的form对象作为Prop到FormDetailsView，但FormDetailsView里的formObj一直是undefined，只能正常拿到id。相关代码如下：

路由配置 #

const routes = [{
  path: "/form/:id",
  name: "formDetails",
  component: FormDetailsView, 
  props: true,
}]

MyFormsView代码 #

<template>
    <h1>My Forms</h1>
    <div v-for="form in forms" :key="form.id" class="form">
        <router-link
            :to="{
                name: 'formDetails',
                params: { id: form.id },
                props: { formObj: form },
            }"
        >
            <h2>{{ form.title }}</h2>
        </router-link>
    </div>
</template>
<script>
export default {
    data() {
        return {
            forms: [
                { title: "Form 1", id: 1, details: "lorem" },
                { title: "Form 2", id: 2, details: "lorem" },
                { title: "Form 3", id: 3, details: "lorem" },
            ],
        };
    },
};
</script>

FormDetailsView代码 #

<template>
    <div class="main-content">
        <h1>Form Details Page</h1>
        <p>Editing form with ID: {{ id }}</p> <!-- 此处可正常显示正确ID -->
        <p>Title: {{ formObj.title }}</p> <!-- 此处报错，提示无法从undefined获取title -->

        <div class="left-container container" ref="left">
            <h3>Form Contents</h3>
        </div>
        <div class="right-container container" ref="right"></div>
    </div>
</template>

<script>
export default {
    name: "formDetails",
    props: ["id", "formObj"],
    mounted() {
        console.log(this.formObj); // 输出undefined
    },
};
</script>

错误原因 #

1. router-link的props字段无效：你在router-link的:to配置里写的props属性不被Vue Router识别，路由组件的Prop传递需要在路由定义中配置，而非跳转参数里。
2. 对象无法通过URL参数传递：即使强行把对象放到params里，URL只能传递字符串，对象会被序列化为[object Object]，无法解析成原对象。

解决方法（两种可选） #

方法1：路由配置中用props函数动态获取（推荐，支持页面刷新）

通过路由参数的id，从数据源匹配对应form对象并传递给组件作为Prop，刷新页面也能正常获取数据。

修改路由配置：

const routes = [{
  path: "/form/:id",
  name: "formDetails",
  component: FormDetailsView, 
  // 用props函数动态生成Prop
  props: (route) => {
    // 这里的forms可从全局状态（如Vuex）、全局变量或导入的数据源获取
    const forms = [
      { title: "Form 1", id: 1, details: "lorem" },
      { title: "Form 2", id: 2, details: "lorem" },
      { title: "Form 3", id: 3, details: "lorem" },
    ];
    // 根据id匹配对应的form对象
    const formObj = forms.find(form => form.id === parseInt(route.params.id));
    return { id: route.params.id, formObj };
  }
}]

修改MyFormsView的router-link，仅传递id即可：

<router-link
  :to="{
    name: 'formDetails',
    params: { id: form.id },
  }"
>
  <h2>{{ form.title }}</h2>
</router-link>

FormDetailsView无需修改，就能正常拿到formObj。

方法2：用路由state传递对象（适合无需刷新页面的场景）

Vue Router 3.1+支持通过state传递数据，数据存在内存中，页面刷新后会丢失，适合单页跳转无需刷新的场景。

修改MyFormsView的router-link：

<router-link
  :to="{
    name: 'formDetails',
    params: { id: form.id },
    state: { formObj: form }, // 用state传递对象
  }"
>
  <h2>{{ form.title }}</h2>
</router-link>

修改FormDetailsView，通过$route.state获取对象：

<template>
    <div class="main-content">
        <h1>Form Details Page</h1>
        <p>Editing form with ID: {{ id }}</p>
        <p>Title: {{ $route.state.formObj.title }}</p>

        <div class="left-container container" ref="left">
            <h3>Form Contents</h3>
        </div>
        <div class="right-container container" ref="right"></div>
    </div>
</template>

<script>
export default {
    name: "formDetails",
    props: ["id"],
    mounted() {
        console.log(this.$route.state.formObj);
    },
};
</script>

内容的提问来源于stack exchange，提问作者hotDoggey