vue.js - 带有幻灯片的vue-router过渡不滚动到顶部

Question

我在vue-router中使用了转换，它滑动得很好，但是我想从顶部看到即将到来的页面，相反，我需要手动将新页面滚动到顶部，这是不行的。

所以我添加了应该对我有帮助的选项滚动行为：

使用客户端路由时，我们可能希望在导航到新路由时滚动到顶部，或者像真正的页面重新加载一样保留历史条目的滚动位置。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 }
     }
  }
});

应用程序.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>

标签： vue.jstransitionvue-router