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
}
Ответ 4
Используйте этот приятный компонент: https://www.npmjs.com/package/vue-backtotop
<back-to-top text="Back to top"></back-to-top>
Ответ 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 нажмите здесь