Передача данных через маршрутизатор другому компоненту в vue

Question

Я пытаюсь передать данные через маршрутизатор. Мой код работает, но он показывает данные в URL. Я не хочу это как метод POST. url должен понравиться / data-list . Также я хочу поймать передаваемое значение из компонента. Здесь я не использовал vuex. На самом деле моя работа состоит в том, чтобы показать сообщение, что задача выполнена на основе этих данных. Я использую Laravel для бэкэнда. Заранее спасибо

1-й компонент

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

Вы можете добавить данные маршрутизатора sh в маршрутизатор следующим образом.

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")
    },

и в списке данных. vue Вы можете использовать реквизит для получения данных

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

Answer 2

Так что, если я правильно понимаю, вы выбираете данные в некотором компоненте, а затем выполняете компонент router-pu sh to dataList.

Вы хотите получить доступ к данным в dataList component.

Поскольку вы всегда хотите, чтобы маршрут был /dataList, сделайте это в вашем routes файле

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

},

Затем в компоненте, где вы делаете роутер pu sh, добавляете 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);
  }

Рабочая реализация прилагается ниже.