Vue.js 中如何解决 vue-router 跳转页面无法滚动问题

在 Vue.js 中使用 vue-router 进行页面跳转时，有时会遇到页面无法滚动的问题。这种问题通常发生在使用单页应用（SPA）时，因为在单页应用中，所有页面都是通过 JavaScript 动态生成的，而不是传统的多页应用中的静态 HTML 页面。

问题原因

在单页应用中，页面的内容是通过 JavaScript 动态生成的，而不是通过传统的多页应用中的静态 HTML 页面。因此，当我们使用 vue-router 进行页面跳转时，页面的高度可能会超出浏览器窗口的高度，从而导致页面无法滚动。

解决方法

1. 在路由切换时，手动将窗口滚动到顶部

在路由切换时，手动将窗口滚动到顶部，可以解决页面无法滚动的问题。我们可以在路由切换时，使用 JavaScript 的 scrollTo() 方法将窗口滚动到顶部。

// javascriptcn.com 代码示例
const router = new VueRouter({
  routes: [
    // ...
  ]
})

router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0) // 将窗口滚动到顶部
  next()
})

2. 使用滚动行为（scrollBehavior）配置

Vue.js 的路由系统提供了一个滚动行为（scrollBehavior）配置项，可以用来控制路由切换时的滚动行为。我们可以在滚动行为中，使用 JavaScript 的 scrollTo() 方法将窗口滚动到顶部。

const router = new VueRouter({
  routes: [
    // ...
  ],
  scrollBehavior(to, from, savedPosition) {
    return { x: 0, y: 0 } // 将窗口滚动到顶部
  }
})

总结

在 Vue.js 中使用 vue-router 进行页面跳转时，有时会遇到页面无法滚动的问题。我们可以通过手动将窗口滚动到顶部或者使用滚动行为（scrollBehavior）配置来解决这个问题。这些方法都非常简单，但可以大大提高用户体验。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656fe400d2f5e1655d8651f2