Vue.js ] Vue-cli 라우터 설정하기, 값 전달 ( Vue-Router, params )

타닥타닥/Vue

Vue.js ] Vue-cli 라우터 설정하기, 값 전달 ( Vue-Router, params )

땅디 2021. 11. 3. 15:30

작성자는 Vue-cli2로 진행했습니다.

vue-router를 이용해 URL 경로마다 보일 컴포넌트들을 설정할 수 있습니다. vue-router를 이용하면 SPA(Single Page Application)를 구현할 수 있습니다. SPA는 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성합니다. 마치 여러 페이지를 구현한 것처럼 보이는 효과가 있습니다.

이번 포스팅에서는 vue-router로 SPA를 구현해보겠습니다. 또, 다른 컴포넌트에 router로 값을 전달해보겠습니다.

위의 사진은 작성자의 프로젝트 구성입니다.

본 포스팅은 다음 순으로 작성되었습니다.

1. vue-router 설치
2. router.js 작성
- params를 이용한 값 전달
3. main.js 설정 추가
4. App.vue 수정
5. 결과

1. vue-router 설치

터미널에 다음 명령어로 vue-router를 설치합니다.

npm i vue-router --save

2. router.js 작성

라우터의 설정 관련 js 파일을 작성합니다. 이름과 경로는 저와 다르게 구성되어도 문제없습니다.

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import Home from './views/Home.vue'
import TestPage from './views/TestPage.vue'

Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',    
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
            props: true
        },
        {
            path: '/test01',
            name: 'test01',
            component: TestPage,
            props: true
        },
    ],

});

mode : # 기호가 포함된 URL을 사용하지 않기 위해 history로 설정합니다. hash로 지정하면 # 기호를 포함한 URL을 사용합니다.
path : router 경로입니다.
name : router에 이름을 부여합니다.
component : 표시될 컴포넌트를 import 하고 지정합니다.
props : params를 이용해 router로 값을 전달하고자 할 때 설정해줍니다.

잠깐 params를 이용해 값을 전달하는 방법을 확인해보겠습니다.

router.push({name:"test01",params:{"value":"testValue"}});

path 대신 name을 이용해 이동할 경로를 설정하고, params를 이용해 값을 지정합니다. 위 코드의 방식으로 전달한 params는 다음의 방법으로 받을 수 있습니다.

this.$route.params.value

이렇게 router로 전달받은 값은 URL에 표시되지 않습니다.

3. main.js 설정 추가

src\main.js에 router 설정을 추가합니다.

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

Line 3, 8 의 코드를 추가합니다.

4. App.vue 수정

src\App.vue에 <router-view />코드를 추가합니다.

App.vue

<template>
    <div id="app">
        <router-view />
    </div>
</template>

router.js에서 설정한 컴포넌트들이 추가한 코드 부분에서 표시됩니다.

5. 결과

라우터가 잘 설정되어 작동하는 모습입니다. path에 따라서 설정한 component가 보입니다. 또, 값이 전달되는 것도 확인할 수 있네요.

아래는 제가 사용한 src\views 경로의 .vue 파일 코드입니다.

Home.vue

<template>
    <div>
        <h1>HOME PAGE</h1>
        <button @click="clickButton">testPage</button>
        <h1>paramsValue : {{this.$route.params.value}}</h1>
    </div>
</template>


<script>
  export default {
    name: "App",
    components: {
    },
    data() {
      return {        
      };
    },
    methods: {
      clickButton() {
        this.$router.push({
          name: "test01",
          params: {
              "value" : "Home에서 보낸 value"
          }
        });
      },

    },
  };
</script>

TestPage.vue

<template>
    <div>
        <h1>TEST PAGE</h1>
        <button @click="clickButton">HOME</button>
        <h1>paramsValue : {{this.$route.params.value}}</h1>
    </div>
</template>


<script>
  export default {
    name: "App",
    components: {
    },
    data() {
      return {        
      };
    },
    methods: {
      clickButton() {
        this.$router.push({
          name: "home",
          params: {
              "value" : "testPage에서 보낸 value"
          }
        });
      },

    },
  };
</script>

이번에는 vue-router의 기본적인 사용방법에 대해서 알아봤습니다. params를 이용하면 값도 편하게 전달할 수 있는 것 같아요!

짠!