通过route.push在组件之间传递数据时未定义route.params-PHP中文网问答

<p>我想将数据从 <em>Homepage.vue</em> 传递到 <em>clickthru.vue</em>。</p> <p>单击表中的记录（在 Homepage.vue 中）我想路由到一个新组件（clickthru.vue）。目标是以两种不同的方式传递两种数据：</p> <p><strong>首先：</strong>我想将<em>cve_id</em>作为route.query传递，如下所示</p> <pre class="brush:php;toolbar:false;">/clickthru?cve_id=CVE-xxxx-xxxx</pre> <p><strong>第二：</strong>我还想传递一个对象作为参数来渲染/安装在clickthru.vue的html模板上。该对象看起来像这样：</p> <pre class="brush:php;toolbar:false;">{ "cve": "CVE-2022-45869", "severity": "Medium", "packages": [ { "package": "kernel", "version": "5.15.80.1", "owner": "joslobo", "detection_date": "12-03-2022", "BranchStatus": { "1.0": { "sourceBranch": "NULL", "status": "NULL", "detectedOn": "NULL", "patchedOn": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "aid": "NULL", "qid": [ "NULL" ] }, "2.0": { "sourceBranch": "2.0", "status": "Unpatched", "detectedOn": "12-03-2022", "patchedOn": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "aid": "11574", "qid": [ "Not Assigned" ] } } }, { "package": "kernel", "version": "5.10.155.1", "owner": "joslobo", "detection_date": "12-03-2022", "BranchStatus": { "1.0": { "sourceBranch": "1.0", "status": "Unpatched", "detectedOn": "12-03-2022", "patchedOn": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "aid": "11573", "qid": [ "Not Assigned" ] }, "2.0": { "sourceBranch": "NULL", "status": "NULL", "detectedOn": "NULL", "patchedOn": "NULL", "firstPatchedPackageRelease": "NULL", "fixReleaseDate": "NULL", "aid": "NULL", "qid": [ "NULL" ] } } } ] }</pre> <p>在我的<em>homepage.vue</em>中，我迭代记录/对象并以表格格式显示，如下所示： <strong>Homepage.vue</strong></p> <pre class="brush:php;toolbar:false;"><tbody> <template v-for="(cve) in backend_res"> <template v-for="(pack_key, index) in Object.keys(cve.packages)"> <tr> <td> <span v-if="index == 0" @click.prevent="onAboutClick(cve.cve, cve.packages)"> {{cve.cve}} </span> </td> </tr> </template> </template> </tbody></pre> <pre class="brush:php;toolbar:false;">methods: { onAboutClick(cve_id, cve_obj) { console.log('----> cve_id = ', cve_id) console.log('----> cve_obj = ', cve_obj) // cve_obj is successfully printed at this point this.$router.push( { name: 'clickthru', query: {'cve_id': cve_id}, params: {'cve_obj': cve_obj} })}</pre> <p><strong>clickthru.vue</strong></p> <pre class="brush:php;toolbar:false;"><script> export default { props: ['cve_id', 'cve_obj'], data() { return { cve_id: this.$route.query.cve_id, cve_obj: this.$route.params.cve_obj, // cve_obj is undefined }; },</pre> <p><strong>main.js</strong></p> <pre class="brush:php;toolbar:false;">const routes = [ { path: '/clickthru', name: 'clickthru', component: clickthru, props: true } ]</pre> <p>如下所示，当<em>$route</em>被记录时，查询被成功识别，但是，params为空。</p> <pre class="brush:php;toolbar:false;">{ "fullPath": "/clickthru?cve_id=CVE-2022-45869", "hash": "", "query": { "cve_id": "CVE-2022-45869" }, "name": "clickthru", "path": "/clickthru", "params": {}, "matched": [ { "path": "/clickthru", "name": "clickthru", "meta": {}, "props": { "default": false }, "children": [], "instances": { "default": null }, "leaveGuards": { "Set(0)": [] }, "updateGuards": { "Set(0)": [] }, "enterCallbacks": {}, "components": { "default": { "props": [ "cve_id", "cve_obj" ], "__hmrId": "91ec59e3", "__file": "E:/ASTROLABE_FE/CBL-Mariner-CVE-Website/src/components/clickthru.vue" } } } ], "meta": {}, "href": "/clickthru?cve_id=CVE-2022-45869" }</pre> <p>我希望能够传递 cve_obj 而不是 url/path 的一部分任何关于如何通过参数、元或任何其他方式做到这一点的提示都值得赞赏</p>

全部回复(1)

P粉5471709722023-09-02 10:45:09 1楼

正如我在评论中提到的，将对象作为查询参数传递并不是一种受欢迎的方式，因此有两种方法可以做到这一点 -

方法 1-
仅将 cve_id 传递给新路由，并在安装新路由的页面时，使用此查询参数 cve_id 从后端获取 cve_object。这种方法很有用，值得推荐，因为您始终会从后端获得更新的数据。

如果您遵循这种方法，那么需要进行一些更改 -

在 Homepage.vue 中仅将 cve_id 传递给您的新路线 -

methods: {
    onAboutClick(cve_id) {
        this.$router.push({
            name: "clickthru",
            query: { cve_id: cve_id },
        });
    },
},

在 clickthru.vue 安装的挂钩上，初始化 API 调用以获取该 id 的 cve_data-

mounted() {
 // Make an API call to fetch the respected id's data
}

方法 2-
当您在 HomePage.vue 中收到记录（正在循环的记录）时，请将此数据保存到您的 Vuex 状态。现在，与方法一相同，仅将 cve_id 传递给新路由，并在安装新路由的页面时，从 Vuex 状态，而不是从额外的 API 调用中获取。

如果您遵循这种方法，那么过程将是这样的-

当您在 HomePage.vue 中收到后端响应时，将其转储到状态中，如下所示 -

const store = new Vuex.Store({
  state: {
    records: []
  },
  mutations: {
    SET_RECORDS (state, backend_response) {
      // mutate state
      state.records = backend_response;
    }
  }
})