Question

我在vue-router中使用过渡效果，并且滑动效果很好，但是我想从顶部看到下一页，相反，我需要手动将新页面滚动到顶部，这不行。 / p>

所以我添加了选项scroll-behavior，该选项应该对我有帮助：

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

vue-router转换，其中幻灯片未滚动到顶部

0 个答案: