Rutas con nombre

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

Angel David Velasco Bonifaz

student•

AL empezar el video, esta mal, esta repetido 2 veces lo mismo, por si lo pueden corregir, maestra Diana Martinez, en el minuto 1:39, y al 2:27 vuelve a pasar lo mismo

Ameth Ordoñez Erazo

student•

A veces es necesario mostrar varias vistas al mismo tiempo en lugar de anidarlas, ejemplo: creando un diseño con una vista de barra lateral y una vista principal. Aquí es donde las vistas con nombre resultan útiles. En lugar de tener una sola salida a la vista, puede tener varias y asignarles un nombre a cada una de ellas. Una vista de enrutador sin nombre se le dará por default como su nombre.

<router-view name="LadoIzquierdo"></router-view>
<router-view></router-view>
<router-view name="LadoDerecho"></router-view>

Una vista se representa mediante el uso de un componente, por lo tanto, múltiples vistas requieren múltiples componentes para la misma ruta. Asegúrese de usar la opción de componentes (con una s):

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        // esta es la abreviatura para LadoIzquierdo: LadoIzquierdo
        LadoIzquierdo,
        // debe coincidir con el atributo name en el <router-view>'
        LadoDerecho,
      },
    },
  ],
})

Ameth Ordoñez Erazo

student•

Cuando se cambia de ruta (por ejemplo se va al Home o al About), y se regresa al Session, no muestra los componentes hijos Login y Register, toca darle actualizar a la página para que salgan. A que se debe esto?

Diana Martinez

student•

Debe ser algún bug en este proyecto, no lo tengo a la mano, no podría decirte exactamente por qué está pasando, pero supongo que algo en el ciclo de vida de las rutas.

Rafael Soriano Ramírez

student•

No me ocurre ese bug, creo que es un tema de tu estructura de rutas

Rutas con nombre

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