Route specific hooks

Use route hooks if you need to redirect or run custom logic for a particular navigation request.

Hooks available

• beforeEnter: called before entering route transition
• afterEnter: called after entering route transition
• beforeLeave: called before leaving route transition
• afterLeave: called after leaving route transition
• intercept: meant to process the navigation request before any hook

before / after hooks

Allow to do anything for a particular route, like loading data for the corresponding view. Their function signature is the following: beforeEnter(request, router)

intercept hook

Is specifically meant to alter navigation requests.

It must always return a navigation request.
eg: {route: '/some/route', params: {}}

The typical use case is for handling redirection or setting parameters.

Full example

Shows fetching data, setting default params, accessing the app store and redirection.

// routes.js
export const routes = {
  '/': {},
  '/public': {},
  '/not-allowed': {},

  '/private': {
    intercept(request) {
      // Example checking auth, you have access to your app store
      if (!rootStore.user.isAuthenticated()) {
        request.route = '/not-allowed'
      }
      return request
    },
  },

  '/private/my-things': {
    intercept(request) {
      // Example: redirection
      if (request.route === '/private/my-things') {
        request.route = '/private/my-things/details'
      }
      return request
    },
  },

  '/private/my-things/details': {
    // Example: setting default params
    intercept(request) {
      if (typeof request.params.thingID === 'undefined') {
        request.params.thingID = DEFAULT_ID
      }
      return request
    },

    // Example: fetching some data before UI is shown
    beforeEnter(request) {
      const {params} = request
      rootStore.myThings.fetchDetails(params.thingID)
      return request
    },
  },
}