Router18

• 

  VueRouter의 Programmatic Navivation 파헤치기 router.push(...)이전까지 우리는 를 이용한 탐색 방법을 사용했습니다.하지만, javascript에서도 window.loacation이 있듯이 프로그래밍 방식으로 페이지를 탐색 할 수 있습니다.한번 비교해볼까요??선언 방식프로그래밍 방식router.push(...)그럼 한번 어떻게 자유분방하게 사용할 수 있는지 예시를 보면서 생각해 보도록 합시다.// String routerouter.push('/users/james')// route(path)를 나타낸 Objectrouter.push({ path: '/usersjames' })// parameter가 존재하는 이름을 가진 routerouter.push({ name: 'user', parmas: { username: 'james' } })//.. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Nested Route 파헤치기 Nested Route(중첩된 라우트)이전 게시글에서 우리는 를 사용해 보았습니다.Vue Router에서는 route를 중첩해서 사용 할 수 있습니다.이게 무슨말이냐??Vue를 공부하면서 부모-자식 관계를 지겹도록 들었을 겁니다.맞습니다. 도 부모-자식 처럼 사용하는 것이죠.음... 일종의 을 상상해 보시죠.우리는 컴포넌트를 삽입하는 거지만, 얼추 그런 느낌이란 뜻입니다. 다른 겁니다.예시를 보면서 이해해 보도록 합시다. 몇가지 컴포넌트를 만들어 봅시다./user/johnny/profile /user/johnny/posts ┌──────────────────┐ ┌──────────────────┐│ User │ .. FrameWorks/Vue 2024. 6. 23.

• 

  VueRouter의 Named Route 파헤치기 Naming Route우리는 route를 설정할 때 선택적으로 name을 지정할 수 있습니다.const routes = [ { path: '/user/:username', name: 'profile', component: User, }]위에처럼 name을 지정해주면 를 사용시에 to속성에 path정보를 넣지 않고 name을 명시해서 사용할 수 있습니다. 사용자 프로필 name을 이용한 routing은 여러가지 이점이 있습니다.하드코딩된 URL이 없음params의 자동 인코딩URL 오타 방지경로 순위를 우회하여, 같은 경로와 일치하는 하위 순위 라우트를 표시name은 중복될 수 없습니다.같은 name을 사용하는 route가 존재하면 에러를 발생시키죠.Vue .. FrameWorks/Vue 2024. 6. 23.

• 

  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.

• 

  VueRouter의 Router Instance 파헤치기 Basic Router Tag간단한 것들만 배워보고 자세한 것들은 다른 게시글에서 상세하게 설명하겠습니다. or 일반적으로 개발을 할 경우 태그의 경우 현재 페이지에서 다른 페이지로 이동하거나, 페이지 안에서 다른 컨텐츠로 이동할 경우 사용하게 됩니다.그 외의 클릭 이벤트의 경우는 을 사용하죠. or 태그를 사용하여 URL변경시 페이지를 다시 로드하지 않고 URL 생성, 인코딩 및 기타 다양한 기능을 처리할 수 있게 하는 컴포넌트를 사용합니다. 홈 소개 Create Router Instanace각 URL에 맞게 페이지를 이동하려고 한다면 routes를 설정해 주어야 하는데요.가장 우선이 되어야 할 건 Router의 Instanace를 생성.. FrameWorks/Vue 2024. 6. 21.