如何在 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 处理程序，以便在使用路由器 link 时关闭所有打开的菜单。

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

我也试过：

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

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

How to set afterEach handler in vue-router

javascript

vue.js

vue-router

vuejs2