javascript - How to set afterEach handler in vue-router - Stack Overflow

admin管理员组

文章数量:1352008

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: "/",
      ponent: 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?

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: "/",
      ponent: 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?

• javascript
• vue.js
• vuejs2
• vue-router

Share Improve this question Follow edited Aug 18, 2017 at 20:18 thanksd 55.7k2323 gold badges165165 silver badges154154 bronze badges asked Aug 18, 2017 at 19:35 ChristopherChristopher 6811 gold badge11 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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: "/",
      ponent: SampleComponent
    }
  ]
});

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

export default router

本文标签： javascriptHow to set afterEach handler in vuerouterStack Overflow