组件之间的vuejs路由滚动相同答案

【问题标题】：vuejs route between components scroll same组件之间的vuejs路由滚动相同
【发布时间】：2016-12-24 02:14:20
【问题描述】：

<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也是滚动的。有人有什么想法吗？

【问题讨论】：

我已经尝试设置路由器选项 saveScrollPosition，但结果是一样的。

标签： vue.js vue-router vue-component

【解决方案1】：

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

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

对于 Vue2：

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

参考here

【讨论】：

现在找不到链接

【解决方案2】：

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

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

每次导航更改后，这将滚动到页面顶部。你可以read up on the full, official documentation about this functionality here。

【讨论】：

【解决方案3】：

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

【讨论】：