Vue] Router 생성·구현하기

1. 터미널에 아래의 명령어로 라우터 설치합니다.

npm i vue-router@3.5.3 --save

버전 문제때문에 'npm install --save vue-router' 요거쓰면 에러가 뜨니 조심하세요...

 

1. 먼저 라우터로 연결할 페이지를 만들어줍니다.
저는 src 아래에 views 디렉토리를 만들고, 그 안에 Contact.vue, Product.vue, History.vue 페이지를 만들어 주었습니다.

<template>
    <div>
        product
    </div>
</template>

<script>

export default {
    
}
</script>

<style scoped>
    
</style>

 

2. main.js에 router를 넣어줍니다.

import Vue from 'vue'
import App from './App.vue'
import './assets/css/style.css'
import { router } from './routes/index.js'

Vue.config.productionTip = false

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

 

3. 그럼 이제, 라우터를 만들어보겠습니다. routes라는 디렉토리를 만들고, index.js 페이지를 만들어주세요.
Vue-Router는 사용자의 요청에따라 원하는 컴포넌트를 매핑하여 렌더링해줍니다

- History mode는 페이지를 다시로드 하지않고 uri을 탐색할 수 있도록 해주는 기능입니다. uri을 쳤을 때 주소에 ‘#’이 들어가는 걸 보신 적 있으신가요? mode: 'history'를 설정해주시면 '#'이 사라집니다.

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

import Contact from '../views/Contact.vue';
import Product from '../views/Product.vue';
import History from '../views/History.vue';

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/contact',
            component: Contact
        },
        {
            path: '/product',
            component: Product
        },
        {
            path: '/history',
            component: History
        }
    ]
})

 

짜잔, 이렇게하고 'npm run serve'를 친 다음, 원하는 페이지로 들어가면 라우팅이 잘 된 걸 확인하실 수 있습니다.

 

그런데, 이렇게 일일히 페이지를 쳐서 들어가는 건 조금 귀찮네요.. ㅎㅎ 

루트페이지에서 클릭을 하면 원하는 페이지로 넘어가도록 redirect를 추가로 구현해보겠습니다.

REDIRECT

1. 먼저 routes > index.js에서 redirect 할 페이지를 완성해주세요

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

import Contact from '../views/Contact.vue';
import Product from '../views/Product.vue';
import History from '../views/History.vue';

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            redirect: '/contact'
        },
        {
            path: '/contact',
            component: Contact
        },
        {
            path: '/product',
            component: Product
        },
        {
            path: '/history',
            component: History
        }
    ]
})

 

2. 그리고 클릭하면  원하는 페이지로 보내주는 Toobar 페이지를 만들어줍니다.

<template>
    <div class="header">
        <router-link to="/contact">Contact</router-link>  |
        <router-link to="/product">Product</router-link>  |
        <router-link to="/history">History</router-link>  
    </div>
</template>
<script>
export default {
    
}
</script>

 

3. 최상위 컴포넌트인 App.vue에 Toolbar컴포넌트를 등록해줍니다.

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

<script>
import Toolbar from './components/Toolbar.vue';

export default {
  name: 'App',
  components: {
    Toolbar,
  }
}
</script>

 

짜잔~ 클릭하면 리다이렉트가 원하는대로 완성되었네요 

 

 

추가] Component를 이용하여 데이터 옮기기

목적: contact페이지에서 history 페이지의 내용을 불러와보자

1. 먼저, History.vue의 내용을 살짝 바꿔보자

2. Contact.vue에서 History.vue의 내용을 가져오고 싶으면 'History'를 components에 등록해주면된다.  import로 History.vue를 받아오고 components에 등록시킨 뒤 Template안에 써준다.

 

짜잔, /contact에서 history를 잘 불러온 걸 볼 수있다 ;)