1. Curso de Vue
  2. /
  3. Vue Router
  4. /
  5. Tipos de rutas en el proyecto
1 / 1

Tipos de rutas en el proyecto

Tipos de rutas que podemos usar

Rutas sin parámetros

{ path: '/ruta/' }

Rutas con parámetros

Se pueden añadir con expresiones regulares, que recogerán en los datos pasados al componente todos los parámetros en forma de objeto (si los específicamos) o de array si dejamos el número abierto.

// Especificados
{ path: '/post/:id' }
{ path: '/post/:category/:id' }
// Con expresiones regulares
{ path: '/post/:category(\\d+)+' },
// aceptará /post/, /post/1, /post/1/2, etc

Parámetros opcionales

Tan sencillo como añadir una ? al parámetro. Si tenemos una expresión regular no funcionaría correctamente, únicamente con especificados y, a partir del primer opcional, todos deben serlo

// Ejemplos
{ path: '/post/:id?' }
{ path: '/post/:category/:id?' }
{ path: '/post/:category?/:id?' }
{ path: '/post/:category?/:id' } // No sería válido

Ruta por defecto para 404:

Debe definirse siempre la última en prioridad y tenerla en cuenta al recibir los datos, marcando una ruta válida y asignando un alias para el resto de páginas.

// Ejemplos
{
  path: '/404',
  alias: '*',
  name: '404',
  component: NotFound,
},

Rutas privadas (meta + guards), beforeEach y beforeResolve (dentro del componente o en el fichero de configuración del router)