vue.js - 组件之间的vuejs路由滚动相同

Question

<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>

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

Answer 1

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

维 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 }
   }
 })

参考这里

Answer 2

对于Vuejs2.0，有一种新的可接受的方式来处理页面更改时的滚动行为：

 import VueRouter from 'vue-router';
 const router = new VueRouter({
     scrollBehavior (to, from, savedPosition) {
         return { x: 0, y: 0 }
     }
 })

每次导航更改后，这将滚动到页面顶部。您可以在此处阅读有关此功能的完整官方文档。

Answer 3

我认为你滚动了错误的元素。我犯了同样的错误：组件A和组件B都在元素Body中，我让body滚动，所以只要你移动滚动条，它就可以工作A&B.我最终通过滚动组件而不是滚动正文来解决它。