通过route.push在组件之间传递数据时未定义route.params
P粉022285768
P粉022285768 2023-09-01 19:17:09
[Vue.js讨论组]
<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;">{ &quot;cve&quot;: &quot;CVE-2022-45869&quot;, &quot;severity&quot;: &quot;Medium&quot;, &quot;packages&quot;: [ { &quot;package&quot;: &quot;kernel&quot;, &quot;version&quot;: &quot;5.15.80.1&quot;, &quot;owner&quot;: &quot;joslobo&quot;, &quot;detection_date&quot;: &quot;12-03-2022&quot;, &quot;BranchStatus&quot;: { &quot;1.0&quot;: { &quot;sourceBranch&quot;: &quot;NULL&quot;, &quot;status&quot;: &quot;NULL&quot;, &quot;detectedOn&quot;: &quot;NULL&quot;, &quot;patchedOn&quot;: &quot;NULL&quot;, &quot;firstPatchedPackageRelease&quot;: &quot;NULL&quot;, &quot;fixReleaseDate&quot;: &quot;NULL&quot;, &quot;aid&quot;: &quot;NULL&quot;, &quot;qid&quot;: [ &quot;NULL&quot; ] }, &quot;2.0&quot;: { &quot;sourceBranch&quot;: &quot;2.0&quot;, &quot;status&quot;: &quot;Unpatched&quot;, &quot;detectedOn&quot;: &quot;12-03-2022&quot;, &quot;patchedOn&quot;: &quot;NULL&quot;, &quot;firstPatchedPackageRelease&quot;: &quot;NULL&quot;, &quot;fixReleaseDate&quot;: &quot;NULL&quot;, &quot;aid&quot;: &quot;11574&quot;, &quot;qid&quot;: [ &quot;Not Assigned&quot; ] } } }, { &quot;package&quot;: &quot;kernel&quot;, &quot;version&quot;: &quot;5.10.155.1&quot;, &quot;owner&quot;: &quot;joslobo&quot;, &quot;detection_date&quot;: &quot;12-03-2022&quot;, &quot;BranchStatus&quot;: { &quot;1.0&quot;: { &quot;sourceBranch&quot;: &quot;1.0&quot;, &quot;status&quot;: &quot;Unpatched&quot;, &quot;detectedOn&quot;: &quot;12-03-2022&quot;, &quot;patchedOn&quot;: &quot;NULL&quot;, &quot;firstPatchedPackageRelease&quot;: &quot;NULL&quot;, &quot;fixReleaseDate&quot;: &quot;NULL&quot;, &quot;aid&quot;: &quot;11573&quot;, &quot;qid&quot;: [ &quot;Not Assigned&quot; ] }, &quot;2.0&quot;: { &quot;sourceBranch&quot;: &quot;NULL&quot;, &quot;status&quot;: &quot;NULL&quot;, &quot;detectedOn&quot;: &quot;NULL&quot;, &quot;patchedOn&quot;: &quot;NULL&quot;, &quot;firstPatchedPackageRelease&quot;: &quot;NULL&quot;, &quot;fixReleaseDate&quot;: &quot;NULL&quot;, &quot;aid&quot;: &quot;NULL&quot;, &quot;qid&quot;: [ &quot;NULL&quot; ] } } } ] }</pre> <p>在我的<em>homepage.vue</em>中,我迭代记录/对象并以表格格式显示,如下所示: <strong>Homepage.vue</strong></p> <pre class="brush:php;toolbar:false;">&lt;tbody&gt; &lt;template v-for=&quot;(cve) in backend_res&quot;&gt; &lt;template v-for=&quot;(pack_key, index) in Object.keys(cve.packages)&quot;&gt; &lt;tr&gt; &lt;td&gt; &lt;span v-if=&quot;index == 0&quot; @click.prevent=&quot;onAboutClick(cve.cve, cve.packages)&quot;&gt; {{cve.cve}} &lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/template&gt; &lt;/template&gt; &lt;/tbody&gt;</pre> <pre class="brush:php;toolbar:false;">methods: { onAboutClick(cve_id, cve_obj) { console.log('----&gt; cve_id = ', cve_id) console.log('----&gt; 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;">&lt;script&gt; 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>ma​​​​in.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;">{ &quot;fullPath&quot;: &quot;/clickthru?cve_id=CVE-2022-45869&quot;, &quot;hash&quot;: &quot;&quot;, &quot;query&quot;: { &quot;cve_id&quot;: &quot;CVE-2022-45869&quot; }, &quot;name&quot;: &quot;clickthru&quot;, &quot;path&quot;: &quot;/clickthru&quot;, &quot;params&quot;: {}, &quot;matched&quot;: [ { &quot;path&quot;: &quot;/clickthru&quot;, &quot;name&quot;: &quot;clickthru&quot;, &quot;meta&quot;: {}, &quot;props&quot;: { &quot;default&quot;: false }, &quot;children&quot;: [], &quot;instances&quot;: { &quot;default&quot;: null }, &quot;leaveGuards&quot;: { &quot;Set(0)&quot;: [] }, &quot;updateGuards&quot;: { &quot;Set(0)&quot;: [] }, &quot;enterCallbacks&quot;: {}, &quot;components&quot;: { &quot;default&quot;: { &quot;props&quot;: [ &quot;cve_id&quot;, &quot;cve_obj&quot; ], &quot;__hmrId&quot;: &quot;91ec59e3&quot;, &quot;__file&quot;: &quot;E:/ASTROLABE_FE/CBL-Mariner-CVE-Website/src/components/clickthru.vue&quot; } } } ], &quot;meta&quot;: {}, &quot;href&quot;: &quot;/clickthru?cve_id=CVE-2022-45869&quot; }</pre> <p>我希望能够传递 cve_obj 而不是 url/path 的一部分 任何关于如何通过参数、元或任何其他方式做到这一点的提示都值得赞赏</p>
P粉022285768
P粉022285768

全部回复(1)
P粉547170972

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

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

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

  1. 在 Homepage.vue 中仅将 cve_id 传递给您的新路线 -
methods: {
    onAboutClick(cve_id) {
        this.$router.push({
            name: "clickthru",
            query: { cve_id: cve_id },
        });
    },
},
  1. 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 调用中获取。

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

  1. 当您在 HomePage.vue 中收到后端响应时,将其转储到状态中,如下所示 -
const store = new Vuex.Store({
  state: {
    records: []
  },
  mutations: {
    SET_RECORDS (state, backend_response) {
      // mutate state
      state.records = backend_response;
    }
  }
})
  1. 与方法一相同,您的路由查询中有 cve_id,因此可以使用它从状态获取相关的 cve_object。因此,在安装了 clickthru.vue 后,执行以下操作 -
<script>
export default {
    data() {
        return {
            cve_object: null,
        };
    },
    mounted() {
        this.cve_object = this.$store.state.records.find(
            (item) => item.id == this.$route.query.cve_id,
        );
    },
};
</script>

通过这种方式,您将在该州拥有您的记录,因此您可以在任何页面上使用查询 cve_id 查找任何单个记录。

注意-
我只给出从状态获取和设置数据的想法。如果您想采用第二种方法,只需阅读 Vuex 并遵循文档即可。 您还可以在此处查看完整指南 如何在 Vue 应用程序中设置 Vuex

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号