Rutas anidadas

Clase 5 de 17 • Curso de Vue.js: Navegación con Vue Router

Contenido del curso

Introducción

Definición de rutas

API de navegación

Navegación avanzada

Despedida

17
Despedida del curso
01:24 min

Tomar examen

Comentarios

Ameth Ordoñez Erazo

student•

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

student•

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

student•

Excelente aporte, justo estaba buscando esta solución.

Cristian Leandro Henao Santa

student•

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

student•

Abel da Cunha

student•

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