Vue-router beforeEach stuck in infinite loop when using next()

Question

I'm having this problem where i cant use next('/login'). This is my code:

*/ all imports that are needed 

Vue.use(Router);

const routes = [
{path: '/', component: Home},
{path: '/admin', component: Admin},
{path: '/login', component: Login}]

var route = new Router({
routes: routes,
mode: 'history' });

route.beforeEach((to, from , next) => {
console.log(to.fullPath)
next('/login');
});

new Vue({
  el: '#app',
  router: route,
  template: '<App/>',
  components: {
    App
  }
})

It works when i only use next() but when i give the next() function a route it's stuck within an infinite loop

console screenshot

Crackers · Accepted Answer · 2017-08-31 08:28:46Z

23

You have to prevent to call next('/login') if you are already directing to '/login'.

For example:

route.beforeEach((to, from , next) => {
  console.log(to.fullPath)
  if (to.path !== '/login') {
    next('/login');
  } else {
    next();
  }
});

answered Aug 31, 2017 at 8:28

Crackers

1,1257 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

frank Walleway Over a year ago

Thanks! That fixed it

jtlindsey Over a year ago

This still breaks in some cases. When testing this, if a user clicks to navigate to another protected route, the infinite loop starts again. Using afterEach like app.router.afterEach((to, from) => { with app.router.push('/login) does not have that issue.

Jamie Marshall Over a year ago

@learnsomemore - could you elaborate? Do you mean I should be testing to.path != '/login' inside after each and redirect using app.router.push('login') instead of next?

Collectives™ on Stack Overflow

Vue-router beforeEach stuck in infinite loop when using next()

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related