VueJS는 라우터를 통해 매개 변수를 전달함()

VueJS는 라우터를 통해 매개 변수를 전달함()

/login에 있을 때 라우터에 마지막 라우트를 전달하여 원하는 라우트에 로그인할 때 사용자를 리디렉션하고 싶다.

사용자가 다음으로 이동/payment다음으로 리디렉션/login그리고 인증이 정상일 때 사용자를 다음으로 리디렉션하고 싶다.payement

여기 내 라우터.js :

import ...

Vue.use(Router)

let router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/payment',
      name: 'payment',
      component: Payment,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/my-account',
      name: 'my-account',
      component: MyAccount,
      meta: {
        requiresAuth: true
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  console.log('Before Each Routes')
  if(to.matched.some(record => record.meta.requiresAuth)) {
    if (store.getters.isLoggedIn) {
      console.log('Logged in')
      next()
      return
    }
    console.log(to.fullPath)
    next({
      path: '/login',
      params: { nextUrl: to.fullPath }
    })
    return
  } else {
    console.log(to.fullPath)
    next()
  }
})

export default router

so1 나는 console.log를 설정했고 이것을 받았다.

/login으로 직접 이동하는 경우 출력:

Before Each Routes
/login

그런 다음 /payment로 이동하면 출력:

Before Each Routes
/payment
Before Each Routes
/login

그래서 이제 로그인 컴포넌트에 들어가서this.$route.params.nextUrl정의가 없어그next()매개 변수가 존재하지 않는데 왜 그런지 모르겠다.

내가 뭘 잘못하고 있지?

두 가지 다른 메커니즘을 혼동하고 있는 것 같은데, 바로 매개 변수와 질의다.매개 변수는 다음과 같이 URL에 통합되어야 한다./user/:id쿼리 매개 변수가 자동으로 추가되는 동안.

원하는 경우:

next({
    path: '/login',
    query: {
       nextUrl: to.fullPath,
    }
})

관련 판독치: https://router.vuejs.org/api/#1987-object-messages

url을 매개 변수로 전달할 때 위의 트리스탄의 접근법이 가장 좋다.하지만, 일반적인 경우, 우리는 당신이 이것을 사용할 수 있도록 아이디와 같은 것을 전달한다.

next({ name: 'account', params: { id: 3 } });

내역에 네비게이션을 표시하지 않으려면 교체 옵션을 추가하십시오.

next({ name: 'account', params: { id: 3 }, replace: true });

나는 부에로터 3.1.6을 사용하고 있다.

참조URL: https://stackoverflow.com/questions/54677736/vuejs-pass-parameters-through-the-router-next