Vue路由切换不滚动到顶部，使用beforeEach报TypeError错误求助

我来帮你拆解这个问题——你遇到的Uncaught TypeError: vue_router__WEBPACK_IMPORTED_MODULE_1__.default.beforeEach is not a function其实是个很常见的新手误区，咱们一步步理清楚：

错误根源 #

你现在是直接调用Router（路由构造函数）的beforeEach方法，但**beforeEach是路由实例的专属方法，不是Router构造函数本身的方法**。你导入的Router是Vue Router提供的类，只有通过new Router()创建出来的实例，才拥有beforeEach这类守卫方法，直接用构造函数调用自然会报错。

修复步骤 #

只需要调整代码结构，先把路由实例存为变量，再给这个实例绑定守卫即可：

修正后的完整router.js代码 #

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import PastEvents from './views/PastEvents.vue'
import BasicPage from './views/BasicPage.vue'

Vue.use(Router)

// 1. 先实例化路由并保存为变量
const router = new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/past-events', name: 'past-events', component: PastEvents },
    { path: '/basic-page', name: 'basic-page', component: BasicPage }
  ]
})

// 2. 给路由实例绑定全局前置守卫
router.beforeEach(function (to, from, next) {
  window.scrollTo(0, 0)
  next()
})

// 3. 导出配置好的路由实例
export default router

额外优化建议 #

其实Vue Router还提供了更贴合场景的滚动行为配置，你完全不用借助导航守卫，直接在路由实例的配置里添加scrollBehavior选项即可，这也是官方更推荐的写法：

const router = new Router({
  mode: 'history',
  routes: [/* 你的路由配置 */],
  // 新增滚动行为配置，路由切换时自动回到顶部
  scrollBehavior(to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

这种方式比用守卫更简洁，也更符合Vue Router的设计逻辑~

内容的提问来源于stack exchange，提问作者drake035