Vue роутер форсирование

Question

У меня есть несколько ссылок в середине страницы, которые изменяют содержимое в области под ней, используя вложенный маршрутизатор.Мои маршруты, связанные с этой проблемой, выглядят примерно так:

const router = {
  mode: 'history',
  routes: [
    {
      path: '/parent',
      name: 'ParentComponent',
      component: ParentComponent,
      children: [
        {
          path: 'child1',
          name: 'Child1',
          component: Child1,
        },
        {
          path: 'child2',
          name: 'Child2',
          component: Child2,
        },
      ],
    },
  ],
}

Проблема заключается в том, что содержимое прокручивается вниз по странице, и когда я нажимаю ссылку на дочерний путь, он переходит наверх.Поэтому я попытался добавить scrollBehavior, чтобы сохранить положение прокрутки следующим образом:

router.scrollBehavior = (to, from, savedPosition) => {
  console.log('savedPosition: ', savedPosition);
  if (savedPosition) {
    return savedPosition;
  }
  return { x: 0, y: 0 };
}

Это console.log всегда выводит null для меня.При чтении документов говорится, что значение savedPosition имеет значение только в том случае, если это навигация popstate.

Есть ли способ заставить ссылки, которые я сделал, выполнить навигацию popstate или есть другой подход, который я мог бы использовать для сохранения позиции прокрутки, когда я нажимаю на ссылку?

Answer 1

Это просто то, что сказано в связанных документах .

Функция scrollBehavior получает объекты от и до маршрута.Третий аргумент, savePosition, доступен только в том случае, если это навигация в режиме popstate (запускается с помощью кнопок браузера вперед / назад).

Поскольку навигация осуществляется по ссылкам в середине страницы,это не навигация в поп-состоянии.

Таким образом, правильный путь действий состоит в том, чтобы просто не использовать версию функции savePosition, поскольку эта позиция не будет установлена.

Answer 2

Недавно я сделал что-то подобное

scrollBehavior (to, from) {
  if (to.path === from.path && to.query && to.query.page === from.query.page) {
    return false
  } else {
    return { x: 0, y: 0 }
  }
},

Это может вывести вас на правильный путь