0

Lo que intento hacer es, es mandar una variable a otra vista para generar un template... pero no he encontrado nada de informacion, he leido sobre los props pero no me ha quedado del todo claro

Si puedieran darme una idea o documento seria de gran apoyo.

he intentado con props

{
  path: "/templateoc/:numoc",
  name: "templateoc",
  component: () => import('./views/ordenesdecompra/templateOC.vue'),
  props: true
}

esta seria mi ruta

sendoc() {
      this.$router.push({name: "templateoc", params: {numoc: "prueba"}})
    },

y esta seria la funcion con la cual quiero llamarlo pero no me manda nada

7
  • Por favor lee Cómo preguntar, ayudaría que editaras y mostraras algún ejemplo mínimo verificable
    – BetaM
    el 9 dic. 2020 a las 20:16
  • entre vistas o componenes??? son dos cosas distintas...
    – gbianchi
    el 9 dic. 2020 a las 20:22
  • es entre vistas el 9 dic. 2020 a las 20:44
  • entonces no son props... necesitas un store o un bus
    – gbianchi
    el 9 dic. 2020 a las 20:45
  • lo hago por un router pero este valor se ve directo en la url y es algo que no quiero el 9 dic. 2020 a las 20:47

1 respuesta 1

1

En la declaración de la ruta tienes que especificar si el componente va a recibir algún prop, en este caso voy a tomar el ejemplo que da VueRouter.

Así es como seria el componente que tendría que recibir la información:

<template>
  <div>
    <h2 class="hello">{{name}}</h2>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: 'Vue!'
    }
  }
}
</script>

El envió de parámetros puedes declararlo de diferentes formas, un ejemplo es el siguiente que permite enviar valores de forma dinámica por medio de la ruta de acceso declarando por medio de : en el atributo path.

{ path: '/hello/:name', component: Hello, props: true }

Como tu no quieres que aparezcan en la url de acceso, se especificaría de la siguiente manera, por medio del atributo props mandando un objeto o una función que retorne la información que deseas:

{ path: '/static', component: Hello, props: { name: 'hello word' }}
{ path: '/dynamic/:years', component: Hello, props: Saludo}

// función que retorna información, esta funcion se declara afuera de la instancia de VueRouter.
function Saludo(route) {
  // aqui puede ser una consulta o un proceso que desees
  return {
    name: `hello word, el año actual es ${parseInt(route.params.years)}`
  }
}

Otra recomendación es usar el store para guardar y transportar la información de componente a componente, seria mas fácil que usar la forma que brinda VueRouter.

Fuentes consultadas: VueRoute#Passing Props to Route Components.

1
  • al final lo hice por Store pero igual por la dedicacion, y porque probe realmente era la solucion a lo que pedia el 10 dic. 2020 a las 19:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.