Именованные маршруты

Смотрите бесплатные видео-уроки на Vue School

При создании маршрута вы можете опционально задать ему name:

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

При таком подходе можно использовать name вместо path при передаче параметра to в <router-link>:

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

В приведенном выше примере будет создана ссылка на /user/erina.

• Посмотреть в песочнице.

Использование name имеет определенные преимущества:

• Никаких жестко заданных URL-адресов.
• Автоматическое кодирование params.
• Избегание опечаток в URL.
• Обход ранжирования путей, например, для отображения маршрута с более низким приоритетом, который соответствует тому же пути.

Каждое имя должно быть уникальным для всех маршрутов. Если вы добавите одно и то же имя в несколько маршрутов, маршрутизатор сохранит только последний из них. Подробнее об этом можно прочитать в разделе Динамическая маршрутизация.

Есть и другие части Vue Router, которым можно передать описание пути, например, методы router.push() и router.replace(). Более подробно мы рассмотрим эти методы в руководстве по программной навигации. Как и входной параметр to, эти методы также поддерживают передачу местоположения при помощи name:

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