vue-router中的 路由配置项saveScrollPosition不起作用

问题:路由切换时,页面不会自动滚到顶部,总是停留在上一次滑动的位置

路由配置项如下

const router = new Router({
    history: true
})

没有配置saveScrollPosition默认值应该是false,
vue-router的版本是0.7.13,官方文档地址https://github.com/vuejs/vue-...

saveScrollPosition

默认值: false
只在 HTML5 history 模式下可用

当用户点击后退按钮时,借助 HTML5 history 中的 popstate 事件对应的 state 来重置页面的滚动位置。注意,当 <router-view> 设定了相应的场景切换效果时,这个可能不会得到预想的效果。

我这边没有配置saveScrollPosition默认值应该是false, <router-view>也没有设置切换效果,这是什么情况呢?

阅读 10.4k
2 个回答
router.beforeEach(function (transition) {
    window.scrollTo(0, 0)
})

没用那个

如果你的页面是单页应用,Vuet可以实现你的需求

import Vue from 'vue'
import Vuet from 'vuet'
Vue.use(Vuet)

const vuet = new Vuet({
  modules: {
    testModule: {
      data () {
        return {}
      }
    }
  }
})


new Vue({
  // ...
  vuet,
  template: `
    <div v-vuet-scroll.self="{ path: 'testModule',  name: '随便给一个名字' }"></div>
  `
})

如果你需要记录多个滚动条,调用多次v-vuet-scroll这个指令,设置不同的名字即可

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题