如何在 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

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

您可以设置对实例的引用，并afterEach在导出之前为其添加处理程序：

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

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

export default router