4.Router

개요

• Routing 이란 웹 페이지 간의 이동 방법 이다.
• SPA 싱글페이지 어플리케이션에 사용되며 이는 미리 페이지를 받아 놓고 클라이언트의 라우팅을 사용하여 화면을 전환시키는 방법을 말한다.
• 소위 말하는 깜빡임 (새로고침) 이 없기에 UX 가 상승된다.
• Vue 에서는 이를 위해 Vue Router 를 제공한다.

 

---

 

Vue Router 에서 제공하는 태그

• <router-link-to="URL" > : anchor 태그로서 지정한 URL 로 이동시킨다.
• <router-view > : URL 에 맞는 컴포넌트를 뿌려주는 영역이다. URL 에 따라 유동적으로 변화한다.

---

SingFileComponent 체계에서의 Vue Router

• 일단 package.json 에 vue-router 를 등록시키고 설치해야한다.

npm i vue-router --save

• router 의 설정을 정의하는 파일은 js 파일로 따로 모듈화 시킨다.
• vue , vue-router , 필요한 Component 들을 import 하여 routing 정보를 만들어 export 시킨다.

// 라우터 정의는 보통 js 파일에서한다.
import Vue from 'vue';
import VueRouter from "vue-router";

// 필요한 모듈 가져옴
import MainPage from "@/components/router/MainPage";
import LoginPage from "@/components/router/LoginPage";

Vue.use(VueRouter);

export const router = new VueRouter({
    routes: [
        {path: '/main', component: MainPage},
        {path: '/login', component: LoginPage}
    ]
});

 

• main.js 에서 루트 컴포넌트에서 전역적으로 router 를 사용할 수 있게 끔 한다.

import Vue from 'vue'
import App from './App.vue'
import globalComponent from "@/components/2/globalComponent";

//vue router 설정 가져오기
import {router} from './routes/index.js'

Vue.config.productionTip = false

Vue.component('globalComponent',globalComponent);

new Vue({
//ES6
  render: h => h(App),
  router
}).$mount('#app')

 

• 원하는 라우팅 경로에 따라 컴포넌트를 작성한다.

<template>
  <div id="app">
    <router-link to="/main">MainPage</router-link>
    <br>
    <router-link to="/login">LoginPage</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
import LoginPage from "@/components/router/LoginPage";
import MainPage from "@/components/router/MainPage";

export default {
  comments: {
    LoginPage,MainPage
  }
}
</script>

<style>

</style>

 결과

---

 

이보다 중요한 것은 Router 의 기본 문법 체계이다.

• routes 는 Vue Router 에 종속되는 매개 값으로 ObejctArray 이다. path로 endpoint 를 지정하고 component 로 컴포넌트를 매핑한다.
• Vue 인스턴스 에서는 router 라는 키로 Vue Router 를 적용시킨다.
• Vue 문서에서는 뷰인스턴스에 Router 를 사용시 el 속성 없이 .$mount() 로 인스턴스를 강제 부착하는 것을 권장한다.
• Router URL 의 #(Hash) 값을 삭제하기 위해서 Vue Router 생성자의 mode 속성을 'history' 로 준다.

// 라우터 정의는 보통 js 파일에서한다.
import Vue from 'vue';
import VueRouter from "vue-router";

// 필요한 모듈 가져옴
import MainPage from "@/components/router/MainPage";
import LoginPage from "@/components/router/LoginPage";

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '/main', component: MainPage},
        {path: '/login', component: LoginPage}
    ]
});

# 값이 사라진다.

---

 

하위 노드의 Component 를 라우팅 시키는 Nested Router

• Nested Router 는 페이지 이동시 최소 2개 의 컴포넌트를 화면에 뿌린다.
• 기존 endpoint 에 추가된 endpoint 를 자유롭게 지정하면서 컴포넌트를 다르게 보여줄 수 있다.
• 키워드는 children 이다.

 

주의점

• children 속성에 기재된 ObjectArray , 자식 컴포넌트들은 / 를 기재하지 않는다.
• 기재하면 절대경로로 endpoint 를 이어갈 수 없다.
• <router-link to=""> 를 사용할때 상위 endpoint 까지 기재해야한다.
• 기재하지 않으면 해당 컴포넌트를 찾을 수 없다.

Vue Router 설정 정보 => children 에 기재된 path 에는 / 를 붙이지 않는다.

// 라우터 정의는 보통 js 파일에서한다.
import Vue from 'vue';
import VueRouter from "vue-router";

// 필요한 모듈 가져옴
import MainPage from "@/components/router/MainPage";
import LoginPage from "@/components/router/LoginPage";
import Guide from "@/components/router/nested/Main/Guide";
import Info from "@/components/router/nested/Main/Info";

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '/main', component: MainPage, children:[
                {path:'guide',component:Guide},
                {path:'info',component: Info}
            ]},
        {path: '/login', component: LoginPage}
    ]
});

 

사용되는 router-link => 상위 endpoint 까지 기재한다.

<template>
  <div id="MainPage">
    {{MainPageGreeting}}
    <hr>
    <router-link to="/main/guide">GuidePage</router-link>
    <router-link to="/main/info">InfoPage</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
import Guide from "@/components/router/nested/Main/Guide";
import Info from "@/components/router/nested/Main/Info";

export default {
  name: "MainPage",
  data(){
    return {MainPageGreeting:'Hello, This place is Main Page :)'}
  },
  comments: {Guide,Info}
}
</script>

<style scoped>

</style>

 

결과

 

---

 

한번에  같은 레벨의 컴포넌트를 뿌리는 Named View

• Nested Routes 는 상위에서 하위 레벨의 Component 를 endpoint 에 따라 뿌리는 기법이었다.
• 이번에는 같은 레벨의 컴포넌트를 한번에 뿌리는 Named View 를 살펴본다.
• 키워드는 components 이다.

적용

• Vue Router 생성자의 속성인 routes 에 하나의 path에 components 속성으로 여러개의 컴포넌트를 등록한다.
• components 속성에 정의 된 Key 값이 Name View 의 name 이 된다.

// 필요한 모듈 가져옴
import MainPage from "@/components/router/MainPage";
import LoginPage from "@/components/router/LoginPage";
import Guide from "@/components/router/nested/Main/Guide";
import Info from "@/components/router/nested/Main/Info";

import Footer from "@/components/router/Named/Footer";
import Header from "@/components/router/Named/Header";

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '/main', component: MainPage, children:[
                {path:'guide',component:Guide},
                {path:'info',component: Info}
            ]},
        {path: '/login', component: LoginPage},

        {path:'/',components: {
                Footer,
                Header
            }}
    ]
});

<template>
  <div id="app">
    <router-link to="/main">MainPage</router-link>
    <br>
    <router-link to="/login">LoginPage</router-link>
    <hr>
    <router-view></router-view>
    <br>
    <br>
    <br>
    <hr>
    <!-- components 속성의 Key 가 name 이다. -->
    <router-view name="Header"></router-view>
    <br>
    <br>
    <br>
    <hr>
    <router-view name="Footer"></router-view>
  </div>
</template>

<script>
// 하위 컴포넌트가 아니므로 import 문은 필요 없다.
import LoginPage from "@/components/router/LoginPage";
import MainPage from "@/components/router/MainPage";

export default {
  comments: {
    LoginPage,MainPage
  }
}
</script>

<style>

</style>

 

결과