How to pass dynamic parameters to next()?

Question

Vue.js

i have such route in router

{
    path: '/userRoom/:id',
    name: 'UserRoom',
    meta: { auth: true },
    component: userRoom
}

and the same code

router.beforeEach((to, from, next) => {
  const requireAuth = to.matched.some(record => record.meta.auth)
  const userData = JSON.parse(localStorage.getItem('userData'))

  if (to.name === 'UserRoom' && requireAuth) {
    if (userData) {
      console.log('userData')
      next('/userRoom/' + userData._id)
    } else {
      next('/registration')
    }
  } else {
    next()
  }
})

and nothing works, when I click on a link along this route, userData is simply endlessly printed in the console and no redirect occurs, and I noticed that if I change the path in next() to a non-existent route, then it just goes there there is no component

Answer 1

Isn't it because you go to the right address, pass the check and redirect yourself to the same address. We redirected to this address, passed the check, as a result of which we redirected to the same address again

// я перехожу на /userRoom/:id ? и прошел авторизацию?
  if (to.name === 'UserRoom' && requireAuth) {
    if (userData) {
      console.log('userData')
// окей! Снова перехожу на /userRoom/:id 
      next('/userRoom/' + userData._id)