Redirección y alias

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

Carlos Rodríguez

student•

Esto de redireccionamiento y alias es super útil para muchos casos en donde los usuarios estén acustumbrados a observar un template o componente mediiante un slug, para que la web no sea tan robótica y solemente se base en id's y empezar a usar más el SEO como comenta la profe. . En el caso de los slugs es más o enos complejo ya que por ejemplo un artículo contiene una url basado en un id también nos pueda redirigir o contener un alias basado en una url con slug, este slug debe guardarse un un database ya que por cuestiones de SEO el nombre del artículo en un futuro puede cambiarse, es decir que se cambia el slug también y el slug anterior debe consultarse en que ruta pertenece para hacer el nuevo redireccionamiento. . Referencia: Redirect and Alias

Johanna Apure Canónico

student•

{
      path: "/",
      component: HomeView,
      name: 'home',
      alias: '/home'
},
{ 
	path: "/chat", 
redirect: {name: 'chats'} 
},

Lucia Rodriguez

student•

y como seria en el siguiguente caso?

un usuario que no esta logueado y quiere entrar a /perfil. lo deberia redirijir al inicio de sesion, pero si esta logueadoo deberia poder entrar al perfil sin problema

Julian David Alzate Cuervo

student•

por si en la consola les sugiere añadir un nombre al children de session:

    {
      path: '/session',
      name: 'session',
      component: () => import('../views/SessionView.vue'),
      children: [
        {
          path: '',
          name: 'sessions',
          components: {
            default: () => import('../views/LoginView.vue'),
            register: () => import('../views/RegisterView.vue'),
          }
        }
      ]
    },
```    {      path: '/session',      name: 'session',      component: () => import('../views/SessionView.vue'),      children: \[        {          path: '',          name: 'sessions',          components: {            default: () => import('../views/LoginView.vue'),            register: () => import('../views/RegisterView.vue'),          }        }      ]    },

    {
      path: '/session',
      name: 'session',
      component: () => import('../views/SessionView.vue'),
      children: [
        {
          path: '',
          name: 'sessions',
          components: {
            default: () => import('../views/LoginView.vue'),
            register: () => import('../views/RegisterView.vue'),
          }
        }
      ]
    },
```    {      path: '/session',      name: 'session',      component: () => import('../views/SessionView.vue'),      children: \[        {          path: '',          name: 'sessions',          components: {            default: () => import('../views/LoginView.vue'),            register: () => import('../views/RegisterView.vue'),          }        }      ]    },

Redirección y alias

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