переходы vue-router с прокруткой без прокрутки вверх - PullRequest
Новая
       36

переходы vue-router с прокруткой без прокрутки вверх

0 голосов
/ 01 июля 2019

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

Поэтому я добавил опцию scroll-поведения , которая должна помочь мне:

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

Здесь моя конфигурация:

Маршрутизатор 

const routers = [...]

const router = new VueRouter({
  routes: routes,
  mode: 'history',
  scrollBehavior (to, from, savedPosition) {
     if (savedPosition) {
         //return savedPosition
         return { x: 0, y: 0 } // just for debugging
     } else {
         return { x: 0, y: 0 }
     }
  }
});

App.vue 

<template>
<div class="home">
    <header-comp></header-comp>
    <main>
        <transition  name="slide"
                     enter-active-class="animated slideInLeft faster"
                     leave-active-class="animated slideOutRight faster">
            <router-view></router-view>
        </transition>
       </main>
      <footer-comp></footer-comp>
   </div>
</template>
...