Используя Vue-router, есть ли преимущество использования именованных маршрутов, чем просто использование пути напрямую? - PullRequest
Новая
       6

Используя Vue-router, есть ли преимущество использования именованных маршрутов, чем просто использование пути напрямую?

0 голосов
/ 08 сентября 2018

Согласно официальным документам

Иногда удобнее определить маршрут по названию, особенно при соединении с маршрутом или выполнении навигации.

Итак, как это может быть удобнее? 

<router-link :to="{ name: 'user', params: { id: user.id }}">
   {{ user.name }}
</router-link>

против 

<router-link :to="'/user/' + user.id">
   {{ User.name }}
</router-link>

Я чувствую, что упускаю что-то очевидное.

1 Ответ

0 голосов
/ 08 сентября 2018

Я всегда использую именованные маршруты.

Преимущество заключается в том, что вы можете изменить путь маршрута без необходимости изменять путь при каждом вызове <router-link> или this.$router.push().

Это своего рода причина, по которой в программировании мы избегаем магических значений и вместо этого используем именованные константы - мы можем изменить значение в одном месте без необходимости находить и заменять все вхождения значение в нашем коде.

Без использования именованных маршрутов ваш код становится тесно связанным с путем каждого маршрута, вы не можете изменить один без необходимости изменения другого. Именованные маршруты делают наш код независимым от путей маршрутов - он будет работать независимо от того, каким будет путь маршрута.

Другим преимуществом является то, что мы можем воспользоваться наследованием параметров / запросов для вложенных маршрутов - нам не нужно восстанавливать полный путь, вместо этого мы можем просто передать имя дочернего маршрута, и Vue создаст полный путь с любым существующие параметры.

Предположим, у нас есть следующие маршруты: 

{
  name: 'user',
  path: '/user/:id',
  children: [
    {
      name: 'profile',
      path: 'profile'
    }
  ]
}

и текущий маршрут маршрута /user/1. Чтобы перейти на страницу профиля, нам нужно сделать либо: 

this.$router.push({ name: 'profile' })

или 

this.$router.push('/user/' + this.$route.params.id + '/profile')

Первый вариант проще и менее подвержен ошибкам.

...