How to set afterEach handler in vue-router

Question

I have the following script:

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
    }
  ]
}

I would like to add an afterEach handler to the router so that I can close any open menus when a router link is taken.

I tried to add it to the constructor but it is not a constructor argument.

I also tried:

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

But I get an error:

afterEach is not a function

How do I appropriately add an afterEach callback with this setup?

Answer 1

You need to set the afterEach handler on a Router instance (the object returned via new Router()).

You can set a reference to your instance, and add the afterEach handler to it before it's exported:

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

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

export default router