[vue3 & Spring Boot & mariadb] 연동하여 게시판 만들기 #3 vue.js 템플릿 레이아웃 설정.

다음 프로젝트가 뷰를 연동해서 프론트프레임워크를 뷰3으로 사용하려고 하는데 미리 공부할겸 아래 출처에서 차근차근 하나씩 뜯어보며 공부중에 있다. 
스프링만 써보다가 뷰를 써보니 많이 부족하긴 하지만 천천히 차근차근 뜯어보니 조금씩 보이기 시작한다.

정리를 해본다.

출처 : [Vue] Vue.js 게시판 만들기 3 - 레이아웃 분할 (tistory.com)

[Vue] Vue.js 게시판 만들기 3 - 레이아웃 분할

템플릿을
Header
Contents <페이지 변경>
Footer 3개로 나누고.
아래 소스를 App.vue 파일에 넣어 헤더와 푸터를 컴포넌트로 등록한다.  

<template>
  <PageHeader/> <!-- 헤더 컴포넌트 -->
  <router-view/>  <!-- 페이지 이동이 표시될 곳 -->
  <PageFooter/> <!-- 푸터 컴포넌트 -->
</template>

<script>
import PageHeader from '@/components/PageHeader'  <!-- 헤더 페이지 경로 -->
import PageFooter from '@/components/PageFooter'  <!-- 푸터 페이지 경로 -->

export default {
  name: 'App',
  components: {
    PageFooter,   <!-- 푸터 페이지 컴포넌트 선언 -->
    PageHeader    <!-- 헤더 페이지 컴포넌트 선언 -->
  }
}
</script>

<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>

/src/componets/PageFooter.vue
/src/componets/PageHeader.vue 파일을 만들어준다.

<!-- PageHeader.vue -->

<!-- PageHeader.vue -->
<template>
  <header> <!-- 헤더부분  -->
    <div id="nav">
      <router-link to="/">Home</router-link> |   <!-- 링크  router-link -->
      <router-link to="/about">About</router-link> |
      <router-link to="/board/list">게시판</router-link>
    </div>
  </header>
  <hr/>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

<!-- PageFooter.vue --> 

<!-- PageFooter.vue -->
<template>
    <hr/>
    <footer>
      여기는 footer 자리입니다.
    </footer>
  </template>
  
  <script>
  export default {}
  </script>
  
  <style scoped>
  
  </style>

 

Router를 설치하여 페이지 이동을 구현해준다.

npm i --save vue-router

src/router/index.js파일을 만들어 아래와 같이 삽입하여준다.
라우터가 스프링에서 비교하면 컨트롤러 부분이다. 각 컴포넌트를 만들어서 url을 만들어 설정하여준다.

import { createRouter, createWebHistory } from 'vue-router'
import PageHome from '@/views/PageHome.vue'

const routes = [
  {
    path: '/',       // 스프링으로 치면 킨트롤러부분같은 느낌이다.
    name: 'PageHome',  
    component: PageHome
  },
  {
    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/PageAbout.vue')
  }
]

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

export default router

/src/views/PageAbout.vue
/src/views/PageHome.vue 해당 경로에 파일 만들고 아래 소스 삽입~

<!-- PageAbout.vue -->
<template>
    <div class="about">
      <h1>This is an about page</h1>
    </div>
</template>

<!-- PageHome.vue -->
<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: 'PageHome',
    components: {
      HelloWorld
    }
  }
</script>

 

/src/main.js  파일에 라우터 추가하고 실행을 해주면   npm run serve

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

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