Как запустить функцию при смене роутера vue.js?

Question

[Роман Ракзин]

Использую роутер vue.js 2.0
При переходе по ссылке mysite/id1 идёт загрузка данных пользователя с id1.
Мне нужно сделать, что б когда роутер меняется на значения mysite/id:id , то должна сработать функция.
Я делаю так

var routes = [ 
        {
            path: '/id:id', component: UserPage, name: "UserPage",
            beforeEnter :(to, from, next) => {
                console.log(to);
                GM.UserPage.GetUserInfo(to.params.id);
                next();
            } 
        }.......

Но `beforeEnter` срабатывает, только, если я был на другом роуте(тоесть, например на странице `mysite/info`), но если я был внутри роута,т.е на странице `mysite/id1` и хочу перейти на `mysite/id2` бто эта ф-я не срабатыват. А `beforeEach` тоже не работает.
Можно глобально прописать при изменении всего роута `beforeEach`, но если у меня куча компонентов, то получается, через case отлавливать и прописывать? или как реализовать эту задачу?

Answer 1

[Evgeny Kulakov]

Из документации: https://router.vuejs.org/ru/advanced/navigation-gu...

Следует помнить, что изменение параметров маршрута не вызывает выполнения сторожевых хуков enter/leave. Вы можете добавить watch на объект $route для отслеживания этих изменений, или использовать хук beforeRouteUpdate.

Answer 2

[nemoisfree]

beforeRouteLeave (to, from, next) {
    // called when the route that renders this component is about to
    // be navigated away from.
    // has access to `this` component instance.
  }

Answer 3

[wearemieta]

А почему вам нужно это делать именно в роутере? Вы пишите:

но если у меня куча компонентов

то есть, если ваша функция использует компонент, то он может быть еще не отрендерен в момент вызова вашей функции.

Гораздо удобнее вызывать вашу функцию в процессе жизненного цикла компонентов:
Lifecycle-Diagram
Vue component lifecycle

Например, вот так:

export default {
  mounted() {
     GM.UserPage.GetUserInfo(this.$route.params.id)
  }
}

В этом случае мы точно уверены, что компонент отрендерился. В документации к роутеру используется подобный подход: Vue Router Data Fetching