通过路由器将数据传递到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;
}

Answer 1

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

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中，您可以使用道具来获取数据

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

Answer 2

因此，如果我理解正确，那么您正在获取某个组件中的数据，然后您将路由器推入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);
  }

下面的有效实施方式。