在 Vue.js 中使用 vue-router 进行页面跳转时，有时会遇到页面无法滚动的问题。这种问题通常发生在使用单页应用（SPA）时，因为在单页应用中，所有页面都是通过 JavaScript 动态生成的，而不是传统的多页应用中的静态 HTML 页面。
问题原因
在单页应用中，页面的内容是通过 JavaScript 动态生成的，而不是通过传统的多页应用中的静态 HTML 页面。因此，当我们使用 vue-router 进行页面跳转时，页面的高度可能会超出浏览器窗口的高度，从而导致页面无法滚动。
解决方法
1. 在路由切换时，手动将窗口滚动到顶部
在路由切换时，手动将窗口滚动到顶部，可以解决页面无法滚动的问题。我们可以在路由切换时，使用 JavaScript 的 scrollTo() 方法将窗口滚动到顶部。
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-- ---
-
--
---------------------- ----- ----- -- -
------------------ -- -- --------
------
--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