[Vue.js] 기초 개념 정리 - Vue Router

🗂 목차

[Vue.js] 기초 개념 정리 - 기본 환경 구성

[Vue.js] 기초 개념 정리 - Vue Router

[Vue.js] 기초 개념 정리 - Vue LifeCycle Hook

[Vue.js] 기초 개념 정리 - data(), Data 처리

[Vue.js] 기초 개념 정리 - Watch, Array, for문(반복문), if문

 

 

 

🐱 Git Hub 주소 : https://github.com/junyharang-FrontEnd-coding-study/vue.js-study

📖 참고 자료 : https://www.youtube.com/watch?v=sqH0u8wN4Rs

 

 

 

🚀 VueRouter 란?

 

Vue 에서 Routing 기능을 구현할 수 있도록 지원 해 주는 공식 Library 인 것이에요.

여기서 Routing이라는 것은 Web Paging 간에 이동하는 방법을 말하는 것이에요.
기존에는 이용자가 Menu를 Click 하거나, 특정 Button을 Click하게 되면 우리의 Web Site 안에서 특정 Page로 이동할 때, Server에 요청을 하고, 새로운 Page를 받아오는 형식으로 이뤄지게 되었었던 것이에요.

Router라는 개념은 Vue.js 기반 웹은 SPA(Sing Page Application)이기 때문에 단일 Page잖아요?
미리 해당하는 Component Page를 다 받아 놓고, Routing을 이용해서 새롭게 변경된 부분만 화면을 갱신하는 것을 말하는 것이에요.

Vue 뿐만 아니라, React, Angular도 동일하게 Routing을 이용해서 화면을 전환하는 것이에요.

 

 

해당 Project Package에서 위 명령어를 입력 해 주면 되는 것이에요.

 

 

🚀 Layout

 

이제 src/components/ 이 곳에 layout이라는 Directory를 하나 만들 것이에요.

보통 Web site를 보면 상단에 Menu Bar가 있고, 하단에 Footer, 가운데에 Contents 등이 있는데, 상단에 Menu가 바뀔 때마다 가운데 Contents가 바뀌는 방식으로 구성을 하는데, 사실 상단에 Menu는 고정이고, 다시 Page를 갱신할 필요가 없는 부분이기 때문에 그런 기본적인 것들은 layout Directory에 만들어 줄 것이에요.

 

먼저 상단을 나타내는 `Header.vue`를 만들어 주도록 할 것이에요.

 

 

Menu Bar는 Bootstrap을 이용할 것인데, Vue 전용으로다가 만들어 줄 것이에요.

 

https://bootstrap-vue.org/

 

여기 `Get started`를 눌러 주세요!

 

 

위 사진에서 with npm 방식의 명령어를 입력해서 bootstrap-vue를 설치할 것이에요.

 

 

위 명령어를 통해 Bootstrap과 Bootstrap Vue가 Module 형태로 `node_modules` Package에 Download가 되는 것이에요.

 

위와 같이 두 개가 잘 받아졌네요!

 

하지만, 저렇게 받아놨다고 해서 바로 사용할 수 있는 상태는 아닌 것이에요. 바로 추가 작업이 필요한 것이지요. import!

main.js에 아래 내용을 추가 해 줄 것이에요.

 

 

저 부분에서 주니하랑은 아래 내용을 추가 할 것이에요.

 

main.js

 

위와 같이 Bootstrap과 함께 Design도 사용해야 하니 CSS 내용도 추가 해 줄 것이에요.

 

이제 Layout Header에 Menu Bar를 넣어줄 것이에요.

 

Compponets / Navbar

 

위와 같이 이동을 해 준 다음 아래 html 내용을 복사 붙여넣기 할 것이에요.

 

그 전에! Vue는 기본적으로 `<template>` 으로 감싸진 부분과 `<script>`로 감싸진 부분이 있는데,
`<template>`에는 html Code가 들어가는 부분
`<script>`는 html의 Data를 바인딩 하거나, Server와 통신 등을 하기 위한 JavaScript Code가 들어가는 부분

위의 Html Code는 당연히 `<template>`안에 넣어 주도록 할 것이에요.

 

그런 다음 `<script>` 안에 `export default`안에는 이 Component가 무엇인지를 지정할 것인데, 이름을 header라고 지정해 준 것이에요.

 

그 다음엔 `views`라는 Directory를 만들어서 실제 Page를 이 곳에 만들어 줄 것이에요.

 

 

🚀 App.vue

이 부분이 가장 중요한 부분 중 하나인 것이에요.
Vue cli를 통해 설치를 했기 때문에 기본적인 내용이 들어 있는 것을 볼 수 있는 것이에요.

 

위의 App.vue가 아래 처럼 Browser에 출력 되는 것이에요.

 

 

이제 아까 만든 layout/Header.vue를 사용하기 위해서 기존에 있던 Code를 아래와 같이 수정할 것이에요.

 

App.vue

반응형

 

import한 Header를 ./(현재 Dircetory) 밑에 compponets 밑에 layout 밑에 Header.vue에서 가져오고, 이를 13번째 Line에서 Components로 등록 해 주겠다는 의미 인 것이에요.

이렇게 하면 html을 작성하는 `<template>` 안에서 해당 Components를 사용할 수 있는 것이에요.

 

App.vue의 &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

 

 

Header 밑에는 Contents가 들어가는 부분으로 화면이 갱신되는 부분이기 때문에 router가 들어가야 하는 것이에요.
즉 화면이 바뀌는 부분을 `<router-view></router-view>` 이 부분을 통해 Re Loading 하는 방식으로 구성하는 것이에요.

 

 

 

views/Home.vue 생성

 

이제 화면 처리를 위해 views 밑에 Home.vue를 만들어 준 것이에요.

 

Home.vue

Home에는 먼저 h1 Tag를 통해 위와 같이 작성 해 준 것이에요.

 

그런 다음 About.vue도 만들어 줄 것이에요.

 

Aoubt.vue 생성

 

About.vue

 

그리고 위와 같이 작성을 해 주도록 할 것이에요.

 

즉, 위에 App.vue에서  `<router-view></router-view>` 부분이 상황에 따라 Home.vue가 나오거나, About.vue가 나오도록 하기 위해 이렇게 하고 있는 것이에요.

 

아직은 Router에 대한 설정이 된 것은 아니기 때문에 아래 처럼 /src 밑에 router.js를 만들어 줄 것이에요.

router.js 생성

 

router.js

 

위와 같이 vue와 vue-router를 import 해주고, Home, About Components도 import 해 주는 것이에요.

 

router.js

 

위와 같이 router를 설정하게 되면 실제 Path가 바뀔 때마다 미리 만들어 놓은 Component가 만들어 져서 App.vue의 `<router-view></router-view>` 이 곳에 해당 Component를 불어와서 Loading 시키는 개념인 것이에요.

즉, 전체 Page는 가만히 있는 상태에서 `<router-view></router-view>` 이 부분만 Page Component를 가져와서 바뀌는 개념인 것이에요.

본격적으로 route를 이용하기 위해서 main.js에서 선언을 해줘야 하는 것이에요.

main.js

 

위와 같이 3번째 줄 처럼 import를 해 주면 되는 것이에요.

그리고, new Vue()에서 18번째 줄처럼 router를 정의 해 주면 되는 것이에요.

즉, App을 Mount 할 때, router를 쓸 수 있게 해 준 것이랍니다.

 

# npm run serve

 

위의 명령어로 Web을 기동 시켜 줄 수 있는 것이에요.

 

 

🚀 VueRouter 데이터 전달

Vue Router를 통해 데이터를 전달하는 방법은 두 가지가 있는 것이에요.

1. Query
2. Parmas

 

그리고 프로그래밍 방식과 선언적 방식이 존재하는 것이에요.

● Query
| {name : 'Query', query: {name: 'Full Stack 주니하랑', age: 0 }}

●Parmas
| {name : 'Params', Params: {name: 'Full Stack 주니하랑 1', age: 1 }}

 

위와 같은 형태로 Data를 보낼 수 있는데, name은 개발자가 작성한 Router 파일 안에 작성된 name과 동일해야 하는 것이에요.

 

예제 코드

import Vue from 'vue';
import VueRouter from 'vue-router';
import Main from '@/views/Main.vue';
import Query from '../views/Query.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Main',
    component: Main
  },
  {
    path: '/Query',
    name: 'Query',
    component: Query,
  },
  {
    path: '/Params',
    name: 'Params',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Params.vue'),
    // true로 설정하면 데이터를 props로도 받습니다.
    props: true,
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

 

Params로 데이터로르 전달 할 때, router Option에서 props: true로 설정하면 props로 값을 받을 수 있는 것이에요.

 

<template>
  <div>
    Main
    <div>
      <router-link to="/">Main 페이지로</router-link>
    </div>

    <div>
      <br />

      <div>
        <button @click="clickList">Query 프로그래밍 방식</button>
      </div>
      <br />
      <div>
        <router-link
          :to="{ name: 'Query', query: { name: 'Query 선언적 방식', age: 1 } }"
        >
          Query 선언적 방식
        </router-link>
      </div>

      <br />

      <div>
        <button @click="clickParams">Params 프로그래밍 방식</button>
      </div>

      <br />

      <div>
        <router-link
          :to="{
            name: 'Params',
            params: { name: 'Params 선언적 방식', age: 1 },
          }"
        >
          Params 선언적 방식
        </router-link>
      </div>
    </div>

    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    clickList() {
      this.$router.push({
        name: "Query",
        query: { name: "Query 프로그래밍 방식", age: 2 },
      });
    },
    clickParams() {
      this.$router.push({
        name: "Params",
        params: { name: "Params 프로그래밍 방식", age: 2 },
      });
    },
  },
};
</script>

 

 

 

 

🚀 VueRouter 주소(URI)로 이동

Router 정보가 설정 되었다면 각각 해당된 Page, Router로 이동 할 수 있는 것이에요. 이 때, 이동하는 방법은 moveTo() 등을 만들어 `$router.push()` 방법으로 이동 하거나, 아니면 `<router-link>` Component를 이용해서 이동할 수 있는 것이에요.

router-link Component는 해당 Elment를 클릭하게 되면 자동으로 해당 Route 취치로 이동하도록 Link를 생성 해 주는 것이에요. 만약 Home과 SiteList로 이동하는 Link를 각각 만든다면 아래와 같이 만들 수 있는 것이에요.

 

<router-link :to="/">Home<router-link>
<router-link :to="/siteList">SiteList<router-link>