Question

我在vue-cli应用程序中使用哈希模式。此外，我在一条路线上有子路线。

<template>
  <div style="position: relative;">    
   some other code which are common between two child routes
    </div>
    <div class='container' ref="container" >
      <router-view></router-view>
    </div>
  </div>
</template>

当我在子路径之间导航时，滚动位置未重置为零（窗口），并且产生了意外的滚动。此外，如上所述，我无法通过

处理它

scrollBehavior (to, from, savedPosition) {
    // return desired position
  }

因为我没有使用历史记录模式。

因此，我在子路由中编写了以下代码来处理滚动位置，

created () {
  var oContainer = document.querySelector('.container')
  oContainer.scrollTop = 0
},
beforeRouteLeave (to, from, next) {
  var oContainer = document.querySelector('.container')
  oContainer.scrollTop = 0
  next()
},

并且它按我的需要工作（将子路径的滚动位置重置为零）但是，我觉得不合适，因为

在vue-cli中公开查询选择器，而不是使用 this。$ refs.container（但是我无法在$ refs中获得任何值即使在子mount（）方法中）
在一个路由导航中（不是全部），我想重新应用用户返回该子路线时滚动位置。

还有其他解决方法吗？

使用哈希模式处理vue-router子路由滚动位置

0 个答案: