Estoy tratando de pasar datos a través del enrutador. Mi código funciona pero muestra datos en la URL. No quiero que sea como método POST. url debería gustar / data-list . También quiero atrapar el valor de paso del componente. Aquí no usé vuex. En realidad, mi trabajo es mostrar el mensaje de que la tarea se realiza en función de estos datos. Estoy usando Laravel para el backend. Gracias por adelantado

1er componente

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

Rutas

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

Otro componente Aquí quiero atrapar

mounted() {
  var app = this;
  app.message = app.$route.params.message;
}
0
Mithun 4 may. 2020 a las 07:53

2 respuestas

La mejor respuesta

Entonces, si entiendo correctamente, está obteniendo datos en algún componente y luego está haciendo un enrutador al componente dataList.

Desea acceder a los datos en el componente dataList.

Como siempre desea que la ruta sea /dataList, haga esto en su archivo routes

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

},

Luego, en el componente donde realiza la inserción del enrutador, agregue un handleClick así.

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

Luego, en su componente dataList puede acceder a los datos pasados en el mounted de esta manera:

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

Implementación de trabajo adjunta a continuación.

Edit Vue Routing Example

0
Utsav Patel 4 may. 2020 a las 05:55

Puede insertar datos del enrutador en el enrutador de esta manera.

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

Y en las rutas puedes definir tu ruta como

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

Y en DataList.vue puedes usar accesorios para obtener los datos

export default {
 props:['data'],
 mounted(){
   alert(this.data);
 }
}
0
Yogesh Kudikala 4 may. 2020 a las 05:48