Contenido del curso
Ameth Ordoñez Erazo
Contenido del curso
Ameth Ordoñez Erazo
Francisco Ruiz
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
Josue David
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>
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>