Какие способы существуют для реагирования на смену динамического id в маршруте?

Question

Смену динамического id можно обрабатывать через watch на $route.params, через beforeRouteUpdate или через ключ key у <router-view>. Каждый способ имеет свои особенности. watch и beforeRouteUpdate обновляют данные без пересоздания компонента. Использование key приводит к пересозданию компонента.

YeaHub · Accepted Answer

Динамический id в маршруте — частый сценарий при отображении страниц деталей.Способ 1. watch на paramsПодходит для обновления данных без пересоздания компонента.watch: {
  '$route.params.id'(id) {
    this.loadData(id);
  }
}
Плюсы:простой и понятный подходсохраняется состояние компонентаСпособ 2. beforeRouteUpdateИспользуется, если нужен контроль над навигацией.beforeRouteUpdate(to, from, next) {
  this.loadData(to.params.id);
  next();
}
Плюсы:доступ к обоим маршрутамвозможность отменить навигациюСпособ 3. key у router-viewМожно принудительно пересоздать компонент.<router-view :key="$route.fullPath" />
Особенности:вызываются хуки созданиясостояние компонента сбрасываетсяиспользуется редкоВыводВыбор способа зависит от того, нужно ли сохранять состояние компонента или пересоздавать его при смене id.