javascript - 如何在 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 is not a function

如何使用此设置适本地添加 afterEach 回调？

Answer 1

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

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

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

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

export default router