Vue将数据从一页传递到下一页答案

【问题标题】：Vue passing data from one page to the nextVue将数据从一页传递到下一页
【发布时间】：2022-01-17 13:04:31
【问题描述】：

在我的一个页面上，我有一个表格，单击一行后会运行以下内容：

  public onRowDataClick(workItem){    
  this.$router.push({
    path: '/SecondPageView',
    params: {pushedData: workItem}
   });
  }

这是我的路线：

    {
        path: '/SecondPageView',
        name: 'SecondPage',
        component: SecondPage,
        meta: {
            requiresAuth: true,
        },
    },

下一页加载正常，现在我希望能够使用pushedData，但我不完全确定应该怎么做。

我尝试按照上一个 stackoverflow 答案here 进行操作，但由于我的班级设置方式，我无法以相同的方式进行设置？它不会让我在export default ... 之后拥有props:。

根据阅读资料here和之前的回答，我设置如下：

<template>
...
</template>

<script lang="ts">

import ...

const GreetingProps = Vue.extend({
  props: ['pushedData']
});

@Component({
  components: {
...
  },
})  

export default class Dashboard extends GreetingProps {    
  @Watch('buttonClicked')
  Log() {
    console.log(this.pushedData);
  }
}
</script>

这将返回“未定义”。我该怎么做才能将我的数据对象从一个页面转移到另一个页面？

【问题讨论】：

另外，您可以使用 Vuex 存储来存储将在多个页面之间共享的数据。
我正在尝试这个，但我遇到了困难，因为所有示例似乎都以与我获得的 vue 文件不同的方式使用 vue。主要是我没有常规的export default {} 在那里你可以有name: props: 等。有什么办法可以解决这个问题？
看起来文件差异主要来自Typescript。我之前没有使用 Vue 和 TS，所以我不熟悉你有什么。您是否研究过 Vuex-Typescript 支持？这些例子可能更相关。

标签： javascript typescript vue.js

【解决方案1】：

params 用于路径参数。

如果你有这样的路线：/user/:id

你可以$router.push({ name: 'user', params: { id: 'abc123' })

您可以通过$route.params.id 访问动态参数的值（$route 上没有 r）。

如果不需要路径参数，也可以直接使用查询字符串：

router.push({ path: 'register', query: { plan: 'private' } })

这将导致：/register?plan=private

然后您可以通过$route.query.plan访问该值

文档：https://router.vuejs.org/guide/essentials/navigation.html

虽然老实说你可以这样做：

$router.push('/user/abc123') 或 $router.push('/register?plan=private')

【讨论】：

嘿，这似乎很有用！但是我想知道它可以发送字符串以外的东西吗？我有一个数据对象，它本质上是我要传递的字符串数组。
您可以执行 ?strings[]=a&strings=b 或 ?strings=a,b,c 或其他操作，例如将其编码为 base64。可能值得搜索如何使用查询字符串进行字符串数组。