[Vue.js] 03 Router

Vue Router

• 웹페이지 간의 이동 방법 
• 최신 웹 앱 형태 중 하나인 SPA(Single Page Application)에서 주로 사용
• 화면 간의 전환이 매끄러울 뿐만 아니라 애플리케이션의 UX를 향상시킬 수 있다.
  • 일반적으로 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안 화면 상에 깜빡거림 현상이 나타난다.
  • 라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할 수 있을 뿐만 아니라 더 빠르게 화면을 조작할 수 있어 사용자 경험이 향상된다.

설치

CDN 방식

<script src="https://unpkg.com/vue-router/dist/vue-router.js">

 

NPM 방식

npm install vue-router

뷰 라우터 등록

• 뷰 라우터를 설치하고 나면 아래 코드와 같이 라우터 인스턴스를 하나 생성하고 뷰 인스턴스에 등록한다.

// 라우터 인스턴스 생성
var router = new VueRouter({
  // 라우터 옵션
})

// 인스턴스에 라우터 인스턴스를 등록
new Vue({
  router: router
})

뷰 라우터 옵션

var router = new VueRouter({
  // URL의 # 제거 속성
  // ex) http://localhost:63342/sd/frontend/src/playground/router.html/#/login
  mode: 'history',
  //페이지의 라우팅 정보
  routes: [
    {
      // 페이지의 url 이름
      path: '/login',
      // 해당 url에서 표시될 컴포넌트
      component: LoginComponent
    },
    {
      path: '/main',
      component: MainComponent
    }
  ]
});

 

뷰 라우터 태그

router-view

• 브라우저의 주소 창에서 URL이 변경되면, 앞에서 정의한 routes 속성에 따라 해당 컴포넌트가 화면에 뿌려진다

router-link

• 화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 해준다.
• 실제로 화면에선 <a> 태그로 변환되어서 나온다.

<div id="app">
  <div>
    <router-link to="/login">Login</router-link>
    <router-link to="/main">Main</router-link>
  </div>
  <router-view></router-view>
</div>

Nested Routers

• 라우터로 화면 이동 시 Nested Routers를 이용하여 여러개의 컴포넌트를 동시에 렌ㅓ링 할 수 있다.
• 렌더링 되는 컴포넌트의 구조는 가장 큰 상위의 컴포넌트가 하위의 컴포넌트를 포함하는 Parent - Child 형태와 같

<!‐‐ localhost:5000 ‐‐>
<div id="app">
    <router‐view></router‐view>
</div>

<!‐‐ localhost:5000/home ‐‐>
<!‐‐ parent component ‐‐> 
<div>
    <p>Main Component rendered</p> 
    <!‐‐ child compoonent ‐‐> 
    <app‐header></app‐header>
</div>

// localhost:5000/home
{
    path : '/home',
    component: Main,
    children: [
        {
            path: '/',
            component: AppHeader
        },
        {
            path: '/list',
            component: List
        },
    ]
}

 

주의사항

• Vue의 Template 에는 최상위 태그가 1개만 있어야 렌더가 가능하다.

var Foo = {
template: `
    <div>foo</div>
    <router‐view></router‐view>
` // 에러 발생
};

• 여러 개의 태그를 최상위 태그 레벨에 동시에 위치시킬 수 없음.
• 따라서 아래와 같이 최상위 Element는 한개만 지정해야 한다.

var Foo = {
// div 태그 안에 텍스트와 `router‐view` 포함하여 정상 동작
template: `
    <div>foo
        <router‐view></router‐view>
    </div>`
};

 

 

 

출철 : https://www.inflearn.com/course/Age-of-Vuejs