Vue.js прокрутите страницу вверх по тому же маршруту

Я могу настроить поведение прокрутки на Vue.js Router следующим образом:

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'index',
            component: Main
        },
        {
            path: '/some-path',
            name: 'some-path',
            component: SomePath
        }
    ],
    scrollBehavior() {
        return {x: 0, y: 0}
    }
})

Это работает отлично, когда вы нажимаете на ссылку с какой-то страницей, которая не является текущей. Когда я нажимаю ссылку, которая уже отображена, то есть в нижнем колонтитуле ничего не происходит. Vue Router предполагает, что переход состояния отсутствует. Каков предпочтительный способ прокрутки в этом случае?

ОТВЕТЫ

Ответ 1

Вы не можете сделать это через vue-router. Но вы можете добавить прокрутку в верхний метод для каждого маршрутизатора.

Просто создайте метод

 methods: { 
           scrollToTop() {
                window.scrollTo(0,0);
           }
        }

И добавьте его в ссылку

<router-link @click.native="$scrollToTop">

если вы хотите использовать его вне своего нижнего колонтитула, лучше добавить его в прототип Vue

Vue.prototype.$scrollToTop = () => window.scrollTo(0,0)

Это не 100% -ное решение, а простое

Ответ 2

Я хотел ответить на этот вопрос, чтобы добавить больше людей, приходящих на этот вопрос, где поведение прокрутки не работает вообще.

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

В итоге у меня получилось следующее:

const router = new Router({
    mode: 'history',
    routes: [...],
    scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    }
})

Я подключаю свое приложение VueJs к #app, чтобы быть уверенным, что оно присутствует и доступно для выбора.

Ответ 3

Вы также можете использовать behavior: smooth если хотите.

moveTo () {
  let to = this.moveToDown
    ? this.$refs.description.offsetTop - 60
    : 0

  window.scroll({
    top: to,
    left: 0,
    behavior: 'smooth'
  })

  this.moveToDown = !this.moveToDown
}

Ответ 5

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

const router = new Router({
  mode: 'history',
  routes: [...],
  scrollBehavior() {
    window.scrollTo(0,0);
  }
})

Ответ 6

В Vue J есть встроенная поддержка прокрутки, если браузер поддерживает history.pushState.

Это очень легко настроить, просто предоставьте функцию scrollBehavior при создании экземпляра маршрутизатора Vue, как показано ниже:

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // page scroll to top for all route navigations
    return { x: 0, y: 0 }
  }
})

Для получения дополнительной информации о Vue Scroll Behavior нажмите здесь