라우트2

• 

  VueRouter의 Route Matching Grammar 파헤치기 parameter에 커스텀 정규식 사용parameter에 커스텀 정규식을 이용하여 사용할 수 있습니다.숫자만 표시하게 한다던지, 뒤에 추가로 붙는 URL을 허용해야하는 경우에 사용할 수 있죠.다음은 일반적인 route를 사용하는 방법입니다.const route = [ { path: '/order/:orderId'}, { path: '/product/:productName'},]하지만 정적섹션 /order or /product를 사용하고 싶지 않을 수 있습니다.만약 :orderId에서는 숫자만, :productName에는 무엇이든 가능하다면 정규식으로 해당 문제를 해결 할 수 있습니다.const route = [ // /:orderId -> 숫자만 매치됨 { path: '/:order.. FrameWorks/Vue 2024. 6. 21.

• 

  VueRouter의 Dynamic Route Matching with params 파헤치기 :param Data BindingRouter를 통한 화면이동 중 동적으로 데이터를 넘겨주는 방법을 알아보겠습니다.이것은 마치 GET방식의 데이터 전송과 유사한데요. ?key=value&key=valeu&...형식으로 사용하는 것이 아닌 콜론(:)을 사용하는 방법입니다.이 방식은 route의 path에 key를 작성하고 패턴을 적용시키는 방법입니다.query String을 사용하는 방법은 밑에서 알려드리도록 하겠습니다.다음 예시 코드는 User.vue파일로 라우팅시 id라는 key값으로 데이터를 전달하는 방법입니다. 예시를 보겠습니다.import User from './User.vue'const routes = [ { path: '/users/:id', component: User},] .. FrameWorks/Vue 2024. 6. 21.