[Vue] Vue의 기초(4) - Router, layout, views

 Router

 

라우터란 웹페이지 간의 이동하는 방법을 말한다. 리액트, 뷰, 앵귤러 모두 라우팅을 이용해서 화면을 갱신한다.

npm install vue-router@4
또는
yarn add vue-router@4

main.js는 가장 먼저 실행되는 javascript 파일이며, 먼저 router를 import해와서 use에 넣어줍니다.

 

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js';

createApp(App).use(router).mount('#app')

라우터를 사용하기 위해 router.js를 만든다.

 

src/router.js

import { createWebHistory, createRouter } from "vue-router";
import List from './views/List.vue';
import Home from './views/Home.vue';
import Detail from './views/Detail.vue';

const routes = [
  {
    path: "/",
    component: Home,
  },
  {
    path: "/list",
    component: List,
  },
  {
    path: "/detail",
    component: Detail,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router; 

 

 layout

 

components/layout 폴더를 생성하여 기본적인 header, footer를 만들어준다.

 

src/components/layout/Header.vue

<template>
  <div id="nav">
    <router-link class="menu" to="/">Home</router-link>
    <router-link class="menu" to="/about">About</router-link>
  </div>
</template>

<script>
export default {
}
</script>

<style>
#nav {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

#nav .menu{
  color: white;
  padding: 0px;
  margin: 10px;
  text-decoration: none;
}
</style>

src/components/layout/Footer.vue

<template>
    <br><br>
    <div class="footer">made by ian</div>
</template>
<script>
export default {
}
</script>
<style>
.footer {
  background: #f05945;
  color: white;
  margin: auto;
  width: 30%;
  padding: 7px;
  border-radius: 30px 5px 30px 5px;
}

#nav .menu{
  color: white;
  padding: 0px;
  margin: 10px;
  text-decoration: none;
}
</style>

 

 views

 

src/views 폴더를 생성하여 뷰 페이지들을 만들어준다.

 

src/views/Home.vue

<template>
    <div>
        <h1>Welcome to Home!</h1>
        <img src="../assets/logo.png">
    </div>
</template>
<script>
export default {
}
</script>

src/views/About.vue

<template>
  <div class="black-bg" v-if="modal==true">
    <div class="white-bg">
      <h4>Modal Title</h4>
      <p>내용</p>
      <button @click="modal=false">X</button>
    </div>
  </div>
  <div>
    <img src="../assets/p0.png" class="phone-img">
    <h4 @click="modal=true">{{products[0]}}</h4>
    <p>{{price[0]}}만원</p>
    <button @click="count[0]++">찜하기</button>
    <p>❤ : {{count[0]}}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      modal : false,
      count : [0, 0, 0],
      products : ['아이폰12프로', '아이폰12', '아이폰12미니'],
      price : ['130', '110', '90'],
    }
  },
  components: {
  }
}
</script>

<style>
body {
  margin : 0
}

div {
  box-sizing: border-box;
}

.black-bg {
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed; padding: 20px;
}

.white-bg {
  width: 100%; background: white;
  border-radius: 8px;
  padding: 20px;
}

.phone-img {
  width: 100%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

 

반응형

 

 결과물

Home(좌), About(우)

App.vue

<template>
  <Header />
  <router-link to="/">홈페이지</router-link>
  <router-link to="/list">리스트페이지</router-link>
  <router-view :apple="apple"/>
  <Footer />
</template>

<script>
import Header from './components/layout/Header';
import Footer from './components/layout/Footer';
import appleProduct from './assets/appleProduct.js';
export default {
  name: 'App',
  data(){
    return {
      apple : appleProduct
    }
  },
  components: {
    Header,
    Footer,
  }
}
</script>

<router-view />를 이용하면 라우터로 설정한 컴포넌트를 보여준다. props도 보내줄 수 있다. :apple="apple"

<router-link to></router-link>를 이용하면 a 태그처럼 다른 페이지 이동링크를 만들 때 사용한다.