Vue.js прокручивается до новой страницы маршрута после setTimeout

У меня есть переход на страницу, который не работает хорошо, когда свиток вверху нового маршрута мгновен. Я бы хотел подождать 100 мс, прежде чем он автоматически прокрутится вверх. Следующий код вообще не прокручивается. Есть ли способ сделать это?

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        }
    ],
    scrollBehavior (to, from, savedPosition) {
        setTimeout(() => {
            return { x: 0, y: 0 }
        }, 100);
    }
})

Ответы

Ответ 1

Это изначально поддерживается Vue, используйте scrollBehaviour, например:

export default new Router({
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ],
  mode: 'history'
});

Больше здесь.

Ответ 2

Другие ответы не обрабатывают крайние случаи, такие как:

  1. Сохраненная позиция - сохраненная позиция возникает, когда пользователь нажимает назад или вперед. Мы хотим сохранить местоположение, на которое смотрел пользователь.
  2. Хеш-ссылки - например, http://example.com/foo#bar должен перейти к элементу на странице с id bar.
  3. Наконец, во всех других случаях мы можем перейти к началу страницы.

Вот пример кода, который обрабатывает все вышеперечисленное:

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  scrollBehavior: (to, from, savedPosition) => {
    if (savedPosition) {
      return savedPosition;
    } else if (to.hash) {
      return {
        selector: to.hash
      };
    } else {
      return { x: 0, y: 0 };
    }
  }
});

Ответ 3

Если вы хотите, чтобы это произошло на каждом маршруте, вы можете сделать это до hook в маршрутизаторе:

const router = new VueRouter({ ... })

router.beforeEach(function (to, from, next) { 
    setTimeout(() => {
        window.scrollTo(0, 0);
    }, 100);
    next();
});

Если вы используете более старую версию vue-router, используйте:

router.beforeEach(function (transition) { 
    setTimeout(() => {
        window.scrollTo(0, 0);
    }, 100);
    transition.next();
});

Ответ 4

При использовании клиентской маршрутизации мы можем захотеть прокрутить вверх при переходе на новый маршрут или сохранить позицию прокрутки записей истории, как это происходит при перезагрузке реальной страницы. Vue-router позволяет вам достичь этого и даже лучше, позволяет полностью настроить поведение прокрутки при навигации по маршруту.

Примечание. Эта функция работает, только если браузер поддерживает history.pushState.

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

с сохраненной позицией:

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

Для получения дополнительной информации

Ответ 5

Это, вероятно, не самый лучший способ, но добавив

document.body.scrollTop = document.documentElement.scrollTop = 0;

в компоненте основного ядра маршрута (в этом случае Home) mounted() функция достигает того, что я хочу.

Ответ 6

Как насчет этого?

router.beforeEach(function (to, from, next) {
  window.scrollTo(0, 0)
  next()
})