Me recuerda un poco a las configuraciones de rutas con Angular, bastante limpias, pero más en Vue, ya que no importas nada extraño, se ve tan simple y es fácil de entender.
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 7
Preguntas 0
Me recuerda un poco a las configuraciones de rutas con Angular, bastante limpias, pero más en Vue, ya que no importas nada extraño, se ve tan simple y es fácil de entender.
Para rutas con vistas con nombre, debemos definir la opción props para cada vista:
const routes = [
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
Cuando props es un objeto, se establecerá como el componente props tal cual. Útil para cuando los props son estáticos:
const routes = [
{
path: '/promotion/from-newsletter',
component: Promotion,
props: { newsletterPopup: false }
}
]
Tambien se puede crear una función que devuelva props. Esto nos permite convertir parámetros en otros tipos, combinar valores estáticos con valores basados en rutas, etc.
const routes = [
{
path: '/search',
component: SearchUser,
props: route => ({ query: route.query.q })
}
]
La URL /search?q=vue pasaría como {consulta: ‘vue’} como props al componente SearchUser.
Se debe Intentar mantener la función de props sin estado, ya que solo se evalúa en los cambios de ruta. Use un componente contenedor si necesita un estado para definir los props, de esa manera VUE puede reaccionar a los cambios de estado.
Referencia: Passing Props to Route Components
Para definir los props con composition API en ChatView.vue:
import { defineProps, toRefs } from "vue";
const props = defineProps({
chatId: {
type: String,
default: ''
}
})
const {chatId } = toRefs(props); // importante que sea reactivo. Asi recibe el nuevo valor al momento de navegar a otro chatId.
const messagesByAuthor = computed(() => {
return messages.value.filter((m) => `${m.author}` === chatId.value);
});
Esto de los props es Super útil… creo que fue la mejor clase!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.