Rutas con Nombres

Mira una lección de video gratuita en Vue School

Cuando se crea una ruta, opcionalmente podemos darle un nombre (name) a la ruta:

const routes = [
  {
    path: '/user/:username',
    name: 'profile', 
    component: User,
  },
]

Luego podemos usar el name en lugar del path cuando pasamos la prop to al <router-link>:

<router-link :to="{ name: 'profile', params: { username: 'erina' } }">
  User profile
</router-link>

El ejemplo anterior crearía un enlace a /user/erina.

• Míralo en el Playground.

Usar un name tiene varias ventajas:

• Sin URL codificadas.
• Codificación automática de los «parámetros».
• Evita errores tipográficos en las URL.
• Evita la jerarquización de rutas, por ejemplo, para mostrar una ruta de rango inferior que coincida con la misma ruta.

Cada nombre debe ser único en todas las rutas. Si añade el mismo nombre a varias rutas, el enrutador sólo conservará el último. Puedes leer más sobre esto en el apartado Enrutamiento Dinámico.

Hay otras partes de Vue Router a las que se les puede pasar una ubicación, por ejemplo, los métodos router.push() y router.replace(). Entraremos en más detalle sobre estos métodos en la guía de navegación programática. Al igual que la prop to, estos métodos también soportan pasar una localización por name:

router.push({ name: 'profile', params: { username: 'erina' } })