[프론트엔드_개발] Vue Router

혯승·2023년 5월 13일

vuejs

프론트엔드_개발

목록 보기

4/9

Vue Router

💻router 프로젝트

자바스크립트로 구현된 프론트엔드 앱은 Single Page App

여러 화면이 필요한 앱을 자바스크립트로 구현할 때도, 한 페이지에 모든 화면을 다 구현
➡️ 페이지 하나에 여러 화면 구현 : Vue Router 라이브러리 필요 ▶︎ 페이지가 넘어가지 않고도 화면 전환
사용자가 보기에는 페이지가 넘어간 것 처럼 보이지만, 실제로 페이지가 넘어간 것이라 아니라, 화면에 보이는 컴포넌트만 교체

router 프로젝트 생성

vue create vue_app3

Vue Router

Vue Router 설치

vue add router

서버를 실행해보면 웹페이지가 넘어가는 것이 아니라, 화면을 차지하는 컴포넌트만 교체된다.

src/main.js

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

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

import router from './router' 라우터 객체를 import하고,
createApp(App).use(router).mount('#app') 라우터 서비스 객체를 앱에 추가

src/App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

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

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>

화면 전환하기 위한 링크 출력
Home 링크를 클릭하면 "/" 주소에 등록된 컴포넌트가 현재 화면에 출력
About 링크를 클릭하면 "/about" 주소에 등록된 컴포넌트가 현재 화면에 출력

<router-view/>

현재 화면을 차지하는 컴포넌트라 이 부분에 출력

src/views/HomeView.vue

: Home 화면을 구현한 컴포넌트

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

'@/components/HelloWorld.vue'

@부분은 프로젝트 폴더 아래 src 폴더

src/views/AboutView.vue

: About 화면을 구현한 컴포넌트

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

src/router/index.js

: router 객체를 생성하는 코드(여기서 생성된 router 객체는 main.js에 import)

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' //impor는 HomeView만(eager-loading)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // 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/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

{
    path: '/',
    name: 'home',
    component: HomeView
  }

'/' 주소의 HomeView 컴포넌트를 등록
<router-link to="/"> 링크가 클릭되면, HomeView 컴포넌트가 <router-view/> 부분에 출력

AboutView 컴포넌트 등록

lazy loading 방식으로 등록했기 때문에 HomeView 컴포넌트 등록 코드에 비해 복잡

{
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
}

'/about' 주소에 AboutView 컴포넌트를 등록
<router-link to="/about"> 링크가 클릭되면, AboutView 컴포넌트가 <router-view/> 부분에 출력

() => import('../views/AboutView.vue')

위와 같이 구현하면, '/about' 주소 링크가 처음으로 클릭된 경우, AboutView 컴포넌트를 생성 ▶︎ lazy loading

경로는 src/router 폴더를 기준으로, ../views 폴더는 src/view 폴더 ➡️ src/view/AboutView.vue

AboutView 컴포넌트 등록 수정

lazy loading 방식으로 등록하지 않을 거라면, 다음 코드 참조

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

💻TodoView 구현

1) src/views/TodoView.vue

<template>
  <div>
    <h1>할일</h1>
  </div>
</template>

<script>
export default {
  name: 'TodoView'
}
</script>

2) src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import TodoView from '../views/TodoView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  },
  {
    path: '/todo',
    name: 'todo',
    component: TodoView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3) scr/App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/todo">Todo</router-link>
  </nav>
  <router-view/>
</template>

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

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

📚연습문제

NoticeView.vue 구현

혯승

이전 포스트

[프론트엔드_개발] props와 event

다음 포스트

[프론트엔드_개발] Vue Router