Почему Vue router savePosition возвращает ноль?

Я использую Quasar, и это совершенно новый проект, поэтому я использую все последние версии Vue, Vue Router и Pinia.

У меня есть страница с большим списком элементов, поэтому я подумал, что было бы неплохо сохранить положение прокрутки при возврате к списку. Все элементы загружаются из состояния с использованием вычисляемого свойства, только при первой загрузке с сервера. Я добавил код, который должен возвращать сохраненную позицию последней страницы, но каждый раз он возвращается как нуль. только при первом открытии приложения оно возвращается как { x: 0, y: 0 };

У меня есть другое приложение, в котором этот код работает нормально, но это гораздо более старый проект. Я не уверен, что случилось на самом деле.

Вот мой код:

 export default route(function (/* { store, ssrContext } */) {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
    : process.env.VUE_ROUTER_MODE === "history"
    ? createWebHistory
    : createWebHashHistory;

  const Router = createRouter({
    scrollBehavior: (to, from, savedPosition) => {
      console.info(savedPosition);
      if (savedPosition) {
        return savedPosition;
      } else {
        return { x: 0, y: 0 };
      }
    },
    routes,
    history: createHistory(process.env.VUE_ROUTER_BASE),
  });
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
97
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как указано в документации VueRouter

Спасибо, ваш ответ как бы помог мне. Я уже использовал навигацию popstate, моя проблема заключалась в том, что я использовал вкладки и наблюдал за изменением их значения, а затем использовал router.push() для перехода пользователя на эту страницу. По какой-то причине это вызывало проблемы, но теперь это исправлено после того, как вместо этого было изменено использование q-route-tab.

Hamid Hosseini 13.11.2022 04:27

Другие вопросы по теме