Rutas anidadas
Contenido del curso
Rutas anidadas
Contenido del curso
Ameth Ordoñez Erazo
Carlos Rodríguez
Diego Armando Torres Orozco
Cristian Leandro Henao Santa
Johanna Apure Canónico
Abel da Cunha
Seba Cardoso
En Composition API, debido a que no tenemos acceso directamente al objeto this, ya no podemos acceder directamente a this.$router o this.$route. En su lugar, usamos la función useRouter()
import { useRouter, useRoute } from 'vue-router' const router = useRouter() const route = useRoute()
Aqui ya podemos usar los mismos valores que esaban en this.$route, pero con la variable que creamos:
console.log(route.params.id) console.log(route.query.variable)
Si desean ver el código para compositions api de vue:
<script setup> import { ref, computed } from 'vue'; import { useRoute } from 'vue-router'; const route = useRoute(); const messages = ref([ { id: 1, text: 'Mensaje 1', author: 1 }, { id: 2, text: 'Mensaje 2', author: 2 }, { id: 3, text: 'Mensaje 3', author: 3 }, { id: 4, text: 'Mensaje 4', author: 3 }, { id: 5, text: 'Mensaje 5', author: 4 }, { id: 6, text: 'Mensaje 6', author: 4 }, { id: 7, text: 'Mensaje 7', author: 5 }, ]); const messagesOfUser = computed(() => messages.value.filter((msg) => msg.author.toString() === route.params.chatId), ); </script>
. Referencia: Vue Router and the Composition API
Excelente aporte, justo estaba buscando esta solución.
Pregunta. Para el caso de los messages, dado que es un array, no es mejor usar reactive? o en que casos es recomendado usar reactive y en cuales ref?
Las famosas hijas de ruta XD
jajaja
