728x90
반응형

2024/10/21 3

[콜럼Vue스] 명명 라우트

명명 라우트 (Named Routes)명명 라우트는 Vue Router에서 라우트를 정의할 때 이름을 부여하는 방식으로, 라우트를 보다 쉽게 참조하거나 네비게이션할 수 있게 해줌. 라우트 이름을 사용하면 URL을 직접 입력하거나 하드코딩하는 대신, 라우트의 이름을 통해 경로를 참조할 수 있음. 명명 라우트 정의라우트를 정의할 때 name 속성을 추가하여 라우트에 이름을 부여할 수 있음.const routes = [ { path: '/user/:id', component: UserComponent, name: 'user' // 라우트 이름 정의 }]명명 라우트로 네비게이션라우트 이름을 이용해 네비게이션하려면 router.push 또는 에서 이름을 참조할 수 있음.// router.p..

[콜럼Vue스] 중첩라우트

중첩 라우트는 Vue Router에서 다중 뷰 또는 중첩된 컴포넌트 구조를 지원하는 기능을 말함.즉, 부모 라우트의 컴포넌트 안에 자식 라우트를 정의하여, 하나의 페이지에서 여러 개의 컴포넌트를 계층적으로 관리할 수 있게 해줌.중첩 라우트 설정 방법중첩 라우트를 구현하기 위해서는 부모 라우트의 component에 라우트 아울렛(router-view)을 설정하고, 자식 라우트들을 children 속성에 정의해야 함. 기본 구조const routes = [ { path: '/parent', component: ParentComponent, children: [ { path: 'child', component: ChildComponent } ]..

[콜럼Vue스] 동적라우트

동적 라우트는 URL 경로에 변수를 포함하여 여러 가지 유사한 경로를 처리할 수 있는 기능을 말함. Vue Router에서 동적 라우트는 특정 URL 패턴에 매칭되는 경로를 정의하고, 해당 경로에서 동적으로 변하는 부분을 파라미터로 받을 수 있음.동적 라우트 설정 방법동적 라우트는 경로에 콜론(:)을 붙여 정의함.예를 들어, :id라는 동적 파라미터를 사용하면 /user/1, /user/2와 같은 경로가 모두 동일한 라우트에 매칭될 수 있음.const routes = [ { path: '/user/:id', component: UserComponent }]위 코드에서 path에 있는 :id 부분이 동적 파라미터로, /user/1, /user/2 등의 URL에 매칭됨. 여기서 :id는 동적으..

728x90
반응형