Parámetros
Clase 4 de 17 • Curso de Vue.js: Navegación con Vue Router
Contenido del curso
Eduardo Razo Cobián
student•
hace 4 años
Clase 4 de 17 • Curso de Vue.js: Navegación con Vue Router
Contenido del curso
Eduardo Razo Cobián
Eduardo Torres
Ameth Ordoñez Erazo
Francisco Ruiz
Josue David
Alt + 96 = `
Le comparto un tip: Usen la etiqueta <pre> de html para dar un formato mas legible en el html de la variable que quieran revisar. Es genial para ver un json u objecto javascript.
<article> <pre> {{this.$router }}</pre> </article>
Ejemplo realizado con Composition API:
<template> <div> <aside> <div v-for="chat in chats" :key="chat.id"> <RouterLink :to="`/chats/${chat.id}`">{{ chat.name }}</RouterLink> </div> </aside> <article> <h3> {{ this.$route.params.idChat }} </h3> </article> </div> </template> <script setup> import { ref, reactive } from "vue"; const chats = reactive([ { id: 1, name: "Ameth" }, { id: 2, name: "Gabriel" }, { id: 3, name: "Andres" }, { id: 4, name: "Victor" }, { id: 5, name: "Ronald" }, { id: 6, name: "Ana" }, { id: 7, name: "Maria" }, ]); </script>
Para los que quieran usar la Composition API para hacer uso de route dentro del tag script, solo deben importar useRoute de vue-router, asignarlo a una variable y ya podrian acceder a lo largo del archivo
En caso de que alguien este teniendo problemas para acceder a los params de la ruta, es porque en Vue router v4 ha cambiado la manera en la que se accede a ellos. Aquí les dejare un ejemplo de como lo hice y es tan simple como asignar el "this.$router" a una variable. Despues de ello ya podemos acceder a su contenido de la siguiente manera:
<template> <div> <aside> <div v-for="chat in chats" :key="chat.id"> <RouterLink :to="`/chats/${chat.id}`">{{ chat.name }}</RouterLink> </div> </aside> <article>{{ router.currentRoute.params.chatId }}</article> </div> </template> <script lang="ts"> export default { data() { return { router: this.$router, chats: [ { id: 1, name: 'Ximena' }, { id: 2, name: 'Daniel' }, { id: 3, name: 'Carlos' } ] } } } </script>