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

Question

Я могу установить поведение прокрутки для 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 предполагает, что переход между состояниями отсутствует.Каков предпочтительный способ прокрутки вверх в этом случае?

Answer 1

Используйте этот приятный компонент: https://www.npmjs.com/package/vue-backtotop

<back-to-top text="Back to top"></back-to-top>

Answer 2

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

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

В итоге у меня сработало следующее:

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

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

Answer 3

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 Поведение прокрутки нажмите здесь

Answer 4

Вы можете использовать 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
}

Answer 5

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

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

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

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

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

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

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

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