如何在 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 处理程序添加到它：

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

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

export default router