programing

Vue 라우터를 사용하여 리디렉션할 때 매개 변수를 전달하는 방법

prostudy 2022. 3. 10. 22:39
반응형

Vue 라우터를 사용하여 리디렉션할 때 매개 변수를 전달하는 방법

여기에 특정 ID로 양식에 액세스하기 전에 먼저 로그인하는 것을 처리하는 샘플 Vue 라우터가 있다.

router = new VueRouter({
             routes: [
                 {path: '/form/:id', redirect: '/login'},
                 {path: '/login', name: 'Login', component: Login}
             ]
         });

내가 http://localhost:8080/form/c101-101을 실행하면 로그인 구성요소로 직접 리디렉션되고 로그인을 시도할 때 로그인이 전달된 :id 매개 변수에 계속 액세스할 수 있는 방법이 있는가?로그인 컴포넌트 내 $route.params.id은 정의되지 않았다.리디렉션 시 :id를 전달할 수 있는 방법이 있을까?

여전히 이 문제를 겪고 있는 사용자에게는 Vue 문서에 따라 동적 리디렉션 기능을 사용할 수 있다.

파라미터를 사용하는 예(예:yourdomain.com/:yourParam() 및 매개 변수를 사용하여 다른 URL로 리디렉션yourParam쿼리 문자열로 ()yourdomain.com/your/route?yourQueryString=:yourParam):

redirect: to => ({
  name: "your-named-route",
  query: { yourQueryString: to.params.yourParam },
}),

참고: 이 구문은 ES6를 사용하고 있다.

다음과 같이 로그인 경로에서 /:id를 선택사항으로 만들 수 있다.

router = new VueRouter({
         routes: [
             {path: '/form/:id', redirect: '/login/:id'},
             {path: '/login/:id?', name: 'Login', component: Login}
         ]
     });

위의 코드 조각으로 당신은 이것을 얻을 수 있을 것이다.로그인 구성 요소에서 $route.params.id.

참조URL: https://stackoverflow.com/questions/49934179/how-to-pass-parameters-on-redirecting-using-vue-router

반응형