Rutas anidadas

Ameth Ordoñez Erazo

Estudiante

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)

Carlos Rodríguez

Estudiante

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

Diego Armando Torres Orozco

Estudiante

Excelente aporte, justo estaba buscando esta solución.

Cristian Leandro Henao Santa

Estudiante

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?

Johanna Apure Canónico

Estudiante

Abel da Cunha

Estudiante

Las famosas hijas de ruta XD

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

Rutas anidadas

Introducción

Introducción a Vue Router

Setup inicial

Definición de rutas

Definición de rutas

Parámetros

Rutas anidadas

API de navegación

Navegación programática

Rutas con nombre

Redirección y alias

Componentes y props

Modos de historia

Navegación avanzada

Guardas de navegación

Rutas con metadatos

Obtención de datos

Composition API

Coincidencia de rutas

Rutas dinámicas

Despedida

Despedida del curso