I'm creating a Router instance in order to implement a routing system in my app. So, I'm doing it in such a way:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      ponent: Home
    },
  ]
})

But I also need to implement a .beforeEach() hook on my Router instance. What's the workaround?

I find the way like:

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

But I guess in my case it won't be correct? What's the proper way of doing it?

I'm creating a Router instance in order to implement a routing system in my app. So, I'm doing it in such a way:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      ponent: Home
    },
  ]
})

But I also need to implement a .beforeEach() hook on my Router instance. What's the workaround?

I find the way like:

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

But I guess in my case it won't be correct? What's the proper way of doing it?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Jul 6, 2021 at 19:42 Sweet Western 344 bronze badges asked Feb 13, 2018 at 5:51 Камилов ТимурКамилов Тимур 89822 gold badges1414 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Solved:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      ponent: Home
    },
  ]
})

Implementing .beforeEach() hook on router instance:

router.beforeEach((to, from, next) => {
  if(to.meta.requiresAuth) { 
    if(store.state.session.authenticated) { 
        next();
    }
    else {
        next('/admin/login');
    }
  }
  else {
    next();
  }
});

Exporting the instance:

export default router;