[vue.js] vue 라우터

[vue.js] vue 라우터

라우팅(Routing)

라우팅 -> 웹 페이지 간의 이동 방법을 말함.

라우팅은 SPA에서 주로 사용됨.

화면 전환이 매끄러움.

화면 깜빡임 없이 화면전환 즉, 사용자 경험을 향상 시킬 수 있음.

(일반적으로 브라우저에서 요청시 서버 응답을 받으면, 화면 깜빡임 발생)

뷰뿐만 아니라 리엑트, 앵귤러 모두 라우팅을 이용해 화면 전환.

뷰 라우터(Vue Router)

라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리.

페이지 간 이동이 자유로움

페이지 이동 태그. html의 a태그 역할 페이지 표시 태그. 변경되는 url에 따라 컴포넌트를 뿌려줌.

예제

Vue Router Sample 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 // 3. Main. Login 컴포넌트 내용 정의 var Main = { template: '

' }; var Login = { template: '' }; // 4. 각 url에 해당하는 컴포넌트 등록 var routes = [ { path: '/main', component: Main }, { path: '/login', component: Login } ]; // 5. 뷰 라우터 정의 var router = new VueRouter({ routes }); // 6. 뷰 라우터를 인스턴스에 등록 var app = new Vue({ router }).$mount('#app'); //$mount()는 el 속성과 동일하게 인스터스를 화면에 붙이는 역할

예제 결과물

네스티드 라우터(Nested Router)

라우터로 페이지 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있음.

*nested: 중첩

Vue Nested Router var User = { // --< 2 >-- template: `

` }; var UserProfile = { template: '

User Profile Component

' }; var UserPost = { template: '

User Post Component

' }; var routes = [ // --< 3 >-- { path: '/user', component: User, children: [ { path: 'posts', component: UserPost }, { path: 'profile', component: UserProfile }, ] } ]; var router = new VueRouter({ // --< 4 >-- routes }); var app = new Vue({ // --< 5 >-- router }).$mount('#app');

에 를 등록하여 User 컴포넌트가 뿌려질 영역 정의 User, UserPost, UserProfile 컴포넌트의 내용을 각 객체에 정의. routes에서 라우터 정보를 정의 children 속성에서 url값 user/다음에 올 url에 따라 올 컴포넌트 정의 이제 뷰 라우터를 새로 하나 생성하고 앞에서 정의한 라우터 정보를 담은 객체 routes를 정의. 마지막으로 인스턴스를 하나 생성하고 라우터 정보 router를 포함. app이라는 id를 가진 요소에 인스턴스를 붙여 화면에 나타냄.

예제 실행 결과 화면

네임드 뷰(Named View)

특정 페이지로 이동했을 대 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식.

네스티드 라우터 -> 상위 컴포넌트가 하위 컴포넌트를 포함하는 방식

네임드 뷰 -> 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시

네스티드 라우터, 네임드 뷰의 차이

Vue Named View Sample // --<2>-- 컴포넌트 내용 정의, 객체 선언 var Body = { template: '

' }; var Header = { template: '' }; var Footer = { template: '' }; // --<3>-- 라우터 정의. 라우터를 하나 생성하고, 그 안에 라우터 정보를 정의 var router = new VueRouter({ routes: [ { path: '/', // --<4>-- 네임드 뷰가 실행될 URL을 정의하는 속성 components: { // --<5>-- 의 name 속성과 컴포넌트를 연결 default: Body, header: Header, footer: Footer } } ] }) var app = new Vue({ // --<6>-- 마지막으로 인스턴스 생성하고 네임드 뷰 정보를 갖고 있는 라우터를 포함 router }).$mount('#app');

from http://racoonlotty.tistory.com/270 by ccl(A) rewrite - 2021-02-20 18:01:21