search

topgaren / DevStudy

0 stars 0 forks source link

Vue.js Routing Example #12

Open topgaren opened 4 years ago

topgaren commented 4 years ago

Vue 프로젝트 구조

[Spring Project Root]/src/frontend
├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router.js
    ├── store.js
    └── views
        ├── About.vue
        └── Home.vue

@/views와 @/components의 차이점 router에서 보여주는 component 파일은 @/views 폴더에 넣는다. 그 외의 경우는 @/components 폴더에 넣는다.

@/router.js 파일에서 @/views/About.vue와 @/views/Home.vue 을 라우팅 대상으로 설정하고 있다.

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      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/About.vue')
    }
  ]
})

새로운 라우팅 작성

먼저 라우팅 대상이 될 컴포넌트를 작성한다. @/views/MyVue.vue 파일을 다음과 같이 작성한다.

<template>
    <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
    data: function () {
        return {
            greeting: 'Hello'
        }
    }
}
</script>

<style scoped>
p {
    font-size: 2rem;
    text-align: center;
    background-color: black;
    color: white;
}
</style>

@/views/MyVue.vue를 라우팅에 등록하기 위해 @/router.js 파일을 다음과 같이 수정한다.

...
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
...
    {
      path: '/myvue',
      name: 'myvue',
      component: () => import( '@/views/About.vue')
    }
  ]
})

마지막으로 @/App.vue 파일을 다음과 같이 수정하여 화면에 라우팅에 대한 링크를 추가한다.

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/myvue">MyVue</router-link>
    </div>
    <router-view/>
  </div>
</template>
...

실행 결과

서버를 실행시키고 localhost:8080에 접속하면 최초 Vue 화면을 볼 수 있으며, 상단에 추가한 라우팅 링크를 확인할 수 있다. image

MyVue 라우팅 링크를 클릭하면 다음과 같이 라우팅 결과를 확인할 수 있다. image