如何使用 vue-router 在 Vue js 中重定向到所需的页面？

Question

This is my code for requiresAuth and requiresGuest

requiresAuth : Users who satisfy this cannot go to login page or signup page ( meta for / )

requiresGuest : Users who satisfy this cannot go to / or any other page having requiresAuth meta for /login and /signup

These 2 conditions are working perfectly fine for my page

Problem :

Step-1 Lets say i have been given a url like localhost:8000/api/createapi/.......

Step-2 So currently i am not logged in, I enter the above URL and it redirects me to the log in page (which is expected)

Step-3 But when i log back in it redirects me to / (which is not ideal )

What i want :

After Step-2 When i log in it should redirect me automatically to localhost:8000/api/createapi/....... Since that was the requested URL in Step-1

router.beforeEach((to, from, next) => {    
// check for required auth guard
  if (to.matched.some(record => record.meta.requiresAuth)) {
    requiresAuthLogic(to, next, from)
  } else if (to.matched.some(record => record.meta.requiresGuest)) {
    requiresGuestLogic(to, next)
  } else {
    // Proceed to route
    next()
  }
})
function requiresAuthLogic (to:Route, next:Function) {
  // check if NOT logged in
  if (!isUserLoggedIn()) {
    // Go to login
    next({
      path: '/login',
      query: {
        redirect: to.fullPath
     }
    })
  } else if (isUserEmailVerified() === true) {
    // Proceed to route
    next()
  }
}

function requiresGuestLogic (to:Route, next:Function) {
  if (isUserLoggedIn() && isUserEmailVerified() === true) {
    next({
      path: '/',
      query: {
        redirect: to.fullPath
      }
    })
  } else {
    // Proceed to route
    next()
  }
}

Answer 1

If I've understood correctly you need to use the value which is being passed via the redirect parameter

This should be done in your login function if login is successful, you haven't shared your login function but something like this:

loginUser() {
    this.$store.dispatch('loginUser', {
        email: this.email,
        password: this.password
    })
        .then(() => {
            this.$router.push(this.$route.query.redirect)
        })
    }