在Vue中将数据通过路由传递到其他组件

Question

我正在尝试通过路由传递数据。我的代码可以工作，但是它会在 URL 中显示数据。我不希望像 POST 方法那样。URL 应该像 /data-list。另外，我想从组件中捕获传递的值。在这里，我没有使用 Vuex。实际上，我的工作是基于这些数据显示任务完成的消息。我正在使用 Laravel 作为后端。谢谢

第一个组件

axios.post("/request/data", dataform).then(function (resp) {
  app.$router.push({ path: "/data-list/" + resp.data.success });
});

路由

{
  path: '/data-list/:message?',
  name: 'dataList',
  component: dataList,
  meta: {
      auth: true
  }
},

另一个组件。在这里我想要捕获

mounted() {
  var app = this;
  app.message = app.$route.params.message;
}

- Mithun

---

当你说“URL中的数据”时，你确切指的是什么？ 你只是想让路径始终为“/data-list”吗？ - Utsav Patel

我希望路径始终为/data-list。我已经尝试了很长时间。 - Mithun

但是 :message 是动态标签，您是否希望无论获取什么数据都呈现相同的组件？ - Utsav Patel

我想在另一个组件中获取。路径应该是：'/data-list' - Mithun

你想获取什么？ 其他组件是--> dataList吗？ - Utsav Patel

我想在dataList组件中获取resp.data.success的值。 - Mithun

Answer 1

如果我理解得正确，您正在某个组件中获取数据，然后进行路由推送到dataList组件。

您想要在dataList组件中访问数据。

由于您始终希望路由为/dataList，因此请在您的routes文件中执行此操作。

{
  path: '/data-list', //removing dynamic tag.
  name: 'dataList',
  component: dataList,
  meta: {
      auth: true
  }

然后在你进行路由推送的组件中，像这样添加一个handleClick。

handleClick() {
      let data = {
        id: 25,
        description: "pass data through params"
      };
      this.$router.push({
        name: "dataList", //use name for router push
        params: { data }
      });
    }
  }

然后在你的dataList组件中，你可以像这样访问在mounted中传递的数据：

mounted() {
    let data = this.$route.params.data;
    console.log("data is", data);
  }

下面附有可用的实现。

- Utsav Patel

---

感谢您的回复。显示此错误信息：无法读取未定义的'$router'属性。 - Mithun

你试过打开我分享的 CodeSandbox 吗？ 你在 CodeSandbox 上遇到错误了吗？ - Utsav Patel

在mounted中，应该使用route而不是router。 - Utsav Patel

写下这段话是为了帮助那些在Vue3中尝试使用路由传递对象的人路由不支持传递对象，即使之前可以使用。 - Jimmar

Answer 2

您可以像这样在路由器中推送路由器数据。

this.$router.push({
            name: "dataList",
            params: { data: resp.data },
});

在路由中，您可以将自己的路由定义为：

{
      path: "/dataList",
      name: "dataList",
      props: true,
      meta: { title: "Data list" },
      component: () => import("path to datalist component")
    },

在 DataList.vue 中，您可以使用 props 获取数据。

export default {
 props:['data'],
 mounted(){
   alert(this.data);
 }
}

- beingyogi

---

我是初学者。您能告诉我如何在mounted()中获取数据并作为警报显示吗？ - Mithun

感谢您的回复。显示此错误信息：无法读取未定义的'$router'属性。 - Mithun