Vue Router의 history옵션의 모드 (history, hash)

Vue Router의 다양한 history 모드와 hash 모드🍃history 모드- router 인스턴스의 history 옵션을 사용하면 history옵션의 다양한 모드를 선택할 수 있다. (1) Hash 모드const router = createRouter({ history: createWebHashHistory(), routes: [ // ... ],}) - history: createWebHashHistory()- 히스토리 관리 기법을 해시(#)형으로 쓸 수 있다.- 내부적으로 전달되는 실제 url 앞에 #이 붙는다. →  localhost:3000/#/posted  (2) History 모드const router = createRouter({ history: ..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 8. 16.
• textsms

Vue Router의 프로그래밍 방식 네비게이션

Vue Router의 프로그래밍 방식 네비게이션🪐선언적 방식과 프로그래밍 방식 비교 선언적 방식 프로그래밍 방식 router.push(...) - 를 사용하여 선언적 네비게이션용 태그를 사용하는 것 외에 라우터 인스턴스 메서드를 사용하여 페이지 이동 가능하다.  🪐router.push(url) 사용법- push를 통해 다른 url로 이동 가능하다.- 히스토리 스택에 넣어서 뒤로가기 시 이전 url로 이동한다.- 사실 의 내부 메소드라서 기능이 동일하다. ※ router.push 파라미터는 문자열 경로 또는 객체가 가능(1) 리터럴 문자열 경로 → router.push('/users/tay')(2) 경로가 있는 개체  → router.push({ path: '/users/tay' })(3) 이름을 가..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 8. 14.
• textsms

Vue 동적 세그먼트 활용 동적 라우트 매칭 (+404 Not Found Route)

Vue Router의 동적 세그먼트를 활용한 동적 라우트 매칭🍀 동적 세그먼트란?- 주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야할 때 사용한다.  예를 들면 ...사용자 목록/users사용자 상세/users/tay사용자 목록인 /users 에 매핑된다면, 사용자 상세는 /users/tay 처럼 사용자별로 같은 컴포넌트에 매핑되어야 한다.이럴 때 vue router 경로에서 '동적 세그먼트'를 사용하여 해결한다.  🍀 route의 param으로 동적 세그먼트 /users/:id - 동적 세그먼트는 콜론(:)으로 표시한다. - 컴포넌트에서 동적 세그먼트의 값은 $route.params로 접근할 수 있다. route의 param 동적 세그먼트 접근 방법(1) vue router 설정한다. → ..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 8. 13.
• textsms