1 export default new Router({

2   mode: 'history',

3   routes: routeArray,

4   scrollBehavior (to, from, savedPosition) {

5     return { x: 0, y: 0 }

6   }

7 });

 1 <template>

 2     <!--.wrap-box元素固定高度，内容溢出时，该元素纵向滚动-->

 3     <div class="wrap-box" ref="scollElement">

 4         <!--.box元素超出父元素.wrap-box高度时，页面会出现滚动条（滚动元素为.wrap-box）-->

 5         <div class="box">

 6             <!--内容区(切换不同模块)-->

 7             <router-view></router-view>

 8         </div>

 9     </div>

10 </template>

11

12 <script>

13     export default{

14         name:'warp-box',

15         updated () {    // 切换不同模块时触发

16           this.$nextTick(()=>{

17               if(this.$refs.scollElement){    // 滚动元素跳转到顶部

18                   this.$refs.scollElement.scrollTop = 0;

19               }

20           })

21           }

22     }

23 </script>

24

25 <style>

26     .wrap-box{

27         height: 200px;

28         overflow-y: scroll;

29     }

30 </style>

 1 <template>

 2     <div class="item-one" ref="itemOne">

 3         <div class="list-box">

 4

 5         </div>

 6         <div class="page-box">

 7             <el-pagination

 8                 @current-change="handleCurrentChange"

 9                 :current-page="currentPage"

10                 :page-size="pageSize"

11                 layout="total, sizes, prev, pager, next, jumper"

12                 :total="total">

13           </el-pagination>

14         </div>

15     </div>

16 </template>

17

18 <script>

19     export default {

20         name:'item-one',

21         data(){

22             return{

23                 total:0,

24                 tableData:[],

25                 pageSize:20,

26                 currentPage:1,

27             }

28         },

29         methods:{

30             initData(){//初始化数据

31                 // 初始化数据 total、tableData、pageSize、currentPage等

32             },

33             handleCurrentChange(currentPage){  //  currentPage 改变时会触发

34                 this.currentPage = currentPage;

35                 this.initData();

36                 /*

37                      1、当前模块为子模块，当前模块中内容溢出时存在滚动条，滚动条在祖先模块中。

38                      2、当进行翻页时，路由没有变化，无法使用路由跳转滚动条回到顶部的设置，

39                      并且滚动条并不在body上。

40                      3、解决方法：在子模块中找到祖先模块中的滚动元素。（使用$refs的属性offsetParent寻找滚动元素）

41                      4、this.$el为当前组件的挂载元素(这里可以等同于this.$refs.itemOne)

42                  */

43                 // console.log(this.$el.offsetParent.offsetParent,'滚动元素');

44                 this.$nextTick(()=>{

45                     this.$el.offsetParent.scrollTop = 0;

46                     //this.$el.offsetParent 仅限于当前示例模块的祖先模块基于方法二（一层模块嵌套）

47                     //祖先模块的层次将决定offsetParent的获取，使用时应在控制台打印出，确认后使用

48                 });

49             },

50         }

51     }

52 </script>

53

54 <style>

55 </style>