Vue Router наверх на новую страницу

Question

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

Мне было интересно, есть ли функция vue-router, которая заставляет страницу идти вверх, или мне нужно использовать какое-то другое программирование JS для достижения этой цели.

Большое спасибо за помощь.

Answer 1

У маршрутизатора Vue несколько функций защиты и функций, которые вызываются до, во время и после изменения маршрута.В вашем случае есть специальная функция, которая позволяет вам переопределить поведение прокрутки по умолчанию, названное scrollBehavior.Он вызывается с двумя объектами маршрута и объектом, содержащим координаты x и y, и, возможно, селектором, который выбирает элемент на странице для использования в качестве смещения.

Чтобы использовать его,измените код, который определяет ваш маршрутизатор, и добавьте функцию scrollBehavior:

// src/router.js
const router = new VueRouter({
  // What you previously had here, such as routes

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

export default router;