Использую роутер 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 отлавливать и прописывать? или как реализовать эту задачу?
Можно передать параметры маршрута в качестве входных данных компоненту.
Для этого свойству 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);
}
},
// ...
}
Виртуальный выделенный сервер (VDS) становится отличным выбором
Давно смотрю на эту вот ракету с необычным подъемом вверхНо, смущают некоторые ошибки в консоли, которые появляются при включении режима...
В IE11 и Edge div в сниппете после клика становится зелёным, хотя не должен
Здравствуйте, прошу помощи, объяснений, примеров) Пишу слайдер своими силами для сайта (намеренно не использую библиотеки) на чистом js по возможности...