[Spring Boot +Vue.js] 게시판 만들기 3 - 화면 구상하기 (+라우터)
📑 화면 구상 하기
header, footer는 한 번 생성해두면 크게 변할일이 없기 때문에 따로 컴포넌트로 만들어서 App.vue에 고정으로 박아둔다.
한 페이지에 다른 컴포넌트들을 보여주는 방법은 다음과 같다.
🎈 1. import로 Header와 Footer 페이지를 받아온다.
🎈 2. components 안에 import해올 때 지정한 컴포넌트 명칭을 선언해준다. (Header : Header , Header 둘다 가능)
🎈 3. 사용하고 싶은 곳에 컴포넌트 이름으로 태그를 써서 사용한다. <Footer> </Footer>
<App.vue>
<template>
<img alt="Vue logo" src="./assets/logo.png">
<Header></Header>
<router-view></router-view>
<Footer></Footer>
</template>
<script>
import Header from './components/PageHeader.vue'
import Footer from './components/PageFooter.vue'
export default {
name: 'App',
components: {
Header,
Footer,
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
src/components/ 아래 PageHeader와 PageFooter.vue 파일을 생성한다.
<PageHeader.vue>
<template>
<div id="nav">
<b-navbar toggleable type="light" variant="light">
<b-navbar-brand href="#">Board</b-navbar-brand>
<b-navbar-toggle target="navbar-toggle-collapse">
<template #default="{ expanded }">
<b-icon v-if="expanded" icon="chevron-bar-up"></b-icon>
<b-icon v-else icon="chevron-bar-down"></b-icon>
</template>
</b-navbar-toggle>
<b-collapse id="navbar-toggle-collapse" is-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item><router-link to="/" >Home></router-link></b-nav-item>
<b-nav-item><router-link to="/board/list" >Board</router-link></b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
<hr/>
</template>
<script>
export default {
name: "PageHeader.vue"
}
</script>
<style scoped>
</style>
<PageFooter.vue>
<template>
<hr/>
This is Main Footer
</template>
<script>
export default {
name: "PageFooter.vue"
}
</script>
<style scoped>
</style>
📑 라우터로 화면 이동하기
라우팅이란, 웹 페이지 간의 이동 방법을 말한다. 싱글 페이지 애플리케이션(SPA)에서 자주 사용하는 방식이다. 여기서 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 하나의 화면에서 뷰로 만든 여러 페이지 간에 자유로운 이동이 가능하다.
라우터를 설치하려면 설치하고자하는 파일 경로에 다음 명령어를 입력한다.
npm install vue-router@4
라우터 사용 방법이 궁금하다면 아래 링크 참고!
https://wonisdaily.tistory.com/203
[Vue.js] vue-router란 ? 기본 개념과 설치 방법
📑 라우팅이란? 웹 페이지 간의 이동 방법을 말한다. 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA)에서 주로 사용하는 방식이다. 화면 간의 전환을 매끄럽게 진행 시킬 수
wonisdaily.tistory.com
설치한 후 src/router 폴더를 생성하고 index.js 파일을 생성해 아래 소스를 추가한다. 이름은 원하는대로 지으면 된다 router.js로 지어도 된다~
아래의 코드는 라우터를 사용하는 템플릿 같은 것이다. const routes안에 이동하고자 하는 경로만 적어주면 된다.
Home, List를 import 해온 다음에 만약 path가 localhost:8082/board/list 이런 식으로 들어온다면 component 이름이 List인 컴포넌트로 이동해줘 이런 의미이다.
import { createWebHistory, createRouter } from "vue-router";
//경로가 아닌 라이브러리 이름이 들어가면 라이브러리에서 가지고 오겠다.
import Home from '/src/view/Home.vue'
import List from '/src/view/board/List.vue'
const routes = [
{
path: "/",
component: Home,
},
{
path:"/board/list",
component: List,
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
src/views 폴더를 생성하고 PageHome.vue와 src/views/board에 List.vue를 생성해준다.
<Home.vue>
<template>
This is Main HomePage
</template>
<script>
export default {
name: "Home.vue"
}
</script>
<style scoped>
</style>
<List.vue>
<template>
This is boardList
</template>
<script>
export default {
name: "List.vue"
}
</script>
<style scoped>
</style>
마지막으로 src/main.js에서 vue-router를 사용하도록 아래 소스로 변경한다.
import { createApp } from 'vue'
import App from './App.vue'
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
import router from './router'
const app = createApp(App)
app.use(BootstrapVue3)
app.use(router).mount('#app')
/ 경로로 들어왔을 때는 Main Homepage
/board/list로 들어왔을 때는 board List 페이지가 같은 자리에 뜨는 걸 확인할 수 있다.
frontend 프로젝트 구성을 보면 다음과 같다.
📑 multi-word 에러
npm run serve를 하려고 하니 다음과 같은 에러가 난다.
Component name "List.vue" should always be multi-word vue/multi-word-component-names
컴포넌트 이름을 지정할 때 2글자 이상으로 지정해야 된다는 의미이다.
이럴때는 package.json 파일의 "rules" 속성에 다음과 같이 multi-word-component를 off로 설정해주면 된다.
"rules": {
"vue/multi-word-component-names": "off"
}