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

277
01 июля 2017, 13:16

Использую роутер 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

Можно передать параметры маршрута в качестве входных данных компоненту.
Для этого свойству props в маршруте указываем значение true.

var routes = [ 
  {
      path: '/id:id', 
      component: UserPage, 
      name: "UserPage",
      props: true
  }
]

и указываем входные параметры в компоненте

const UserPage = {
  props: ['id'],
  // ...
}

Подробнее о передачи входных параметров в компоненты.

Если нужно выполнить какую-то логику после изменения id, можно использовать вычисляемые свойства или watch. В вашем случае подойдет watch

const UserPage = {
  props: ['id'],
  watch: {
    // эта функция запускается при изменении id
    id: function (id) {
      GM.UserPage.GetUserInfo(id);
    }
  },
  // ...
}

Другой способ использовать сторожевой хук beforeRouteUpdate непосредственно в компоненте.

Вызывается когда маршрут, что рендерит этот компонент изменился, но этот компонент будет повторно использован в новом маршруте. Например, для маршрута с динамическими параметрами /foo/:id, когда мы перемещаемся между /foo/1 и /foo/2, экземпляр того же компонента Foo будет использован повторно, и этот хук будет вызван когда это случится. Также имеется доступ в this к экземпляру компонента.

const UserPage = {
  beforeRouteUpdate (to, from, next) {
    GM.UserPage.GetUserInfo(to.params.id);
    next();
  }
}

Еще способ отслеживать маршрут в компоненте

const UserPage = {
  watch: {
    '$route' (to, from) {
      GM.UserPage.GetUserInfo(to.params.id);
    }
  },
  // ...
}
READ ALSO
fetchOffset is not defined

fetchOffset is not defined

Давно смотрю на эту вот ракету с необычным подъемом вверхНо, смущают некоторые ошибки в консоли, которые появляются при включении режима...

245
IE выполняет requestAnimationFrame после отрисовки, а не до

IE выполняет requestAnimationFrame после отрисовки, а не до

В IE11 и Edge div в сниппете после клика становится зелёным, хотя не должен

286
Как правильно вывести слэш через js?

Как правильно вывести слэш через js?

День добрый! Имеется код:

557
onclick для div в методе класса js

onclick для div в методе класса js

Здравствуйте, прошу помощи, объяснений, примеров) Пишу слайдер своими силами для сайта (намеренно не использую библиотеки) на чистом js по возможности...

237