1

Использую роутер 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 отлавливать и прописывать? или как реализовать эту задачу?

1 ответ 1

3

Можно передать параметры маршрута в качестве входных данных компоненту.
Для этого свойству 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);
    }
  },
  // ...
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.