Query parameters & props url - Tylung/vue-apuntes GitHub Wiki

Todo lo que va despues del ? en una url se le llama query parameter, para poner varios query parameters se usa el &

Ejemplo:

https://www.google.com/search?q=linux&oq=linux

Si queremos mostrar el id del pokemon en PokemonPage, debemos de declarar la propiedad reactiva y una vez creado el componente, se llama a $route con sus params, es decir el parametro que es pasado en el url

Archivo: src/modules/pokemon/pages/PokemonPage.vue

<template>
    <h1>Pokemon Page</h1>
</template> 
    <h1>Pokemon: <span>#{{ id }}</span> </h1>
</template>

<script>
export default {
    props: {
        id: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            id: null
        }
    },
    
    created() {
        const { pokemonid } = this.$route.params
        console.log(pokemonid)
        this.id = pokemonid
    }
}
</script> 

En las rutas se debe de recibir el parametro con /:id

Archivo src/router/router.js

  {
      path: '/:id', 
      name: 'pokemon-id',
      component: () => import(/* webpackChunkName: "PokemonPage"*/ '@/modules/pokemon/pages/PokemonPage')  
  },

Pero al hacer esto en el router.js, no se sabe que parametros se reciben.

const { pokemonid } = this.$route.params

Hay una mejor forma de recibir las propiedades de una url

 { 
      path: '/:id', 
      name: 'pokemon-id',
      component: () => import(/* webpackChunkName: "PokemonPage"*/ '@/modules/pokemon/pages/PokemonPage')  
      props: ( route ) => { 
        const id = Number(route.params.id)
        return isNaN( Number(id) ) ? { id: 1 } : { id }
     }
}

En este bloque se llama la prop route y si no se recibe un numero se pone por defecto 1

y gracias a esto no es necesario llamarlo en el created

  created() { ✔️
        // const { pokemonid } = this.$route.params
        // console.log(pokemonid)
        // this.id = pokemonid
    }