Vue.js 通过路由器将数据传递到vue中的其他组件

我正试图通过路由器传递数据。我的代码正在工作，但它在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;
}

---

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

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);
 }
}

---

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

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);
 }
}

---

所以，如果我理解正确的话，您正在获取某个组件中的数据，然后您正在向

dataList

组件执行路由器推送

您想访问

dataList

组件中的数据

由于您始终希望路由为

/dataList

，请在

路由

文件中执行此操作

{
  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 }
      });
    }
  }

然后在

数据列表

组件中，您可以访问

装入的

中传递的数据，如下所示：

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

工作执行附于下文

---

所以如果我理解正确，您将在某个组件中获取数据，然后将路由器推送到

dataList

组件

您想访问

dataList

组件中的数据

由于您始终希望路由为

/dataList

，请在

路由

文件中执行此操作

{
  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 }
      });
    }
  }

然后在

数据列表

组件中，您可以访问

装入的

中传递的数据，如下所示：

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

工作执行附于下文

---

---

当你说“url中的数据”时，你的确切意思是什么？您只希望路径始终是

/data list

？我希望路径始终是/data list。我尝试了很长时间，但是

：message

是动态标记，您是否希望呈现相同的组件，而不管您获取什么数据？我希望获取其他组件。它应该是路径：'/data list要获取什么？其他组件-->数据列表吗？当您说“url中的数据”时，您的确切意思是什么？您只希望路径始终是

/data list

？我希望路径始终是/data list。我尝试了很长时间，但是

：message

是动态标记，您是否希望呈现相同的组件，而不管您获取什么数据？我希望获取其他组件。它应该是路径：'/data list要获取什么？其他组件-->数据列表吗？我是初学者。你能告诉我在mounted（）中获取我提到的警报数据吗？谢谢回复。显示此项无法读取undefinedI am初学者的属性“$router”。你能告诉我在mounted（）中获取我提到的警报数据吗？谢谢回复。显示此消息时，无法读取未定义的hanks的属性“$router”进行应答。显示此无法读取UndefinedId的属性“$router”，是否尝试打开我共享的codesandbox？您是否面临codesandbox上的错误？在装载中，它是

路由

而不是

路由器

。如果其他人到达此处尝试使用Vue3上的路由器发送对象，即使它以前工作过，请编写此代码。谢谢回复。显示此无法读取UndefinedId的属性“$router”，是否尝试打开我共享的codesandbox？您是否面临codesandbox上的错误？在装载中，它是

路由

而不是

路由器

。如果其他人到达此处尝试使用Vue3上的路由器发送对象，即使它以前工作过，也要编写此代码