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

下面附上工作实现。