组件之间的 vuejs 路由滚动相同 [英] vuejs route between components scroll same

问题描述

<template>
    <div class="index">
        <common-header id="common-header" class="common-header" v-el:commonheader></common-header>
        <router-view transition keep-alive class="index-view"></router-view>
    </div>
</template>

</template>

路由视图会显示两个组件A和B，而组件A scrollTop为0，我路由到组件B，向下滚动，然后路由到组件A，A也滚动.有人有什么想法吗?

解决方案

推荐答案

你可以给路由添加一个全局的 before 钩子，它会在每次路由转换开始之前被调用并滚动到页面顶部.我就是这样解决的.阅读此处

Vue 1.

Vue 1.

router.beforeEach(function (transition) {
 window.scrollTo(0, 0)
 transition.next()
})

对于 Vue2:

 const router = new VueRouter({
   scrollBehavior (to, from, savedPosition) {
     return { x: 0, y: 0 }
   }
 })

参考这里

这篇关于组件之间的 vuejs 路由滚动相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！