Использую роутер 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);
}
},
// ...
}
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости