Vue：beforeEach 不是一个函数

Question

路线更改不会滚动到顶部，因此 Vue 创建者建议使用导航守卫。在更新版本中：

Router.beforeEach(function (to, from, next) {
  window.scrollTo(0, 0)
  next();
})

完美，除了它在我的应用程序中产生这个致命错误： ncaught TypeError: vue_router__WEBPACK_IMPORTED_MODULE_1__.default.beforeEach is not a function

为什么？

以防万一这是我完整的 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)

export default 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
    }
  ]
})

Router.beforeEach(function (to, from, next) {
  window.scrollTo(0, 0)
  next();
})

Answer 1

你已经大写Router，那是类名。您要做的是将您.beforeEach()的添加到路由器的实例中。您会在文档中注意到它始终是小写的router他们添加的守卫。

目前，您会立即从模块中导出实例，因此您需要在创建 a 时首先将其添加到变量中new Router，然后.beforeEach()在最终导出之前向其中添加子句。

const router = new Router({
  ...
})

router.beforeEach( ... )

export default router