如何在vue-router中设置afterEach处理程序

Question

我有以下脚本：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  scrollBehavior (to, from, savedPosition) {
    // purposely left blank
  },
  routes: [
    {
      path: "/",
      component: SampleComponent
    }
  ]
}

我想在路由器上添加一个afterEach处理程序，以便在获取路由器链接时可以关闭所有打开的菜单。

我试图将其添加到构造函数中，但它不是构造函数参数。

我也尝试过：

Router.afterEach((to, from) => {
  // ...
})

但是我得到一个错误：

afterEach不是一个函数

如何在此设置中适当添加afterEach回调？

Answer 1

您需要在Router实例（通过new Router()返回的对象）上设置afterEach处理程序。

您可以设置对实例的引用，并在afterEach实例之前将afterEach处理程序添加到实例中：

const router = new Router({
  scrollBehavior (to, from, savedPosition) {
    // purposely left blank
  },
  routes: [
    {
      path: "/",
      component: SampleComponent
    }
  ]
});

router.afterEach((to, from) => {
  // ...
});

export default router