vuejs 게시판 만들기 #4 (router 사용하기)

 

npm으로  vue-router  모듈을 설치

npm i --save vue-router

 

게시판 리스트 컴포턴트 생성 

src/components/board/List.vue

<template>
	<div>
		<h2>게시판 리스트</h2>
	</div>
</template>

<script>
export default {
	
}
</script>

<style scoped>

</style>

 

 

src/routes 폴더 생성 후 index.js 파일 생성

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld'; //메인 컴포넌트 호출
import List from '@/components/board/List'; //게시판 리스트 컴포넌트 호출

Vue.use(Router); //vue 라우터 사용

export default new Router({ //라우터 연결
	routes:[
		{
			path:'/'
			,name:HelloWorld
			,component:HelloWorld
		}
		,{
			path:'/board/list'
			,name:List
			,component:List
		}
		
	]
})

 

src/main.js 설정한 라우터 사용

import Vue from 'vue'
import App from './App.vue'
import router from './routes'; //설정 라우터 호출

Vue.config.productionTip = true;

new Vue({
  render: h => h(App)
  ,router               //뷰에 설정
}).$mount('#app')

 

헤더파일에 게시판 리스트 이동 및 홈 이동 설정

src/components/common/Header.vue

<router-link to="[path]">이동</router-link> 추가했다.  적용 후 소스보기로 확인하면 a 태그로 변환됨

<template>
	<header>
		<h1><router-link to="/"><img alt="Vue logo" src="../../assets/logo.png" width="80"></router-link></h1>
		<div class="menuWrap">
			<ul class="menu">
				<li><router-link to="/board/list">게시판</router-link></li>
				<li><a href="javascript:;">메뉴2</a></li>
				<li><a href="javascript:;">메뉴3</a></li>
				<li><a href="javascript:;">메뉴4</a></li>
			</ul>
		</div>
	</header>
</template>

<script>
export default {
	
}
</script>

<style scoped>
header{width:100%; text-align:center; position:relative; height:120px; border-bottom:1px solid #35495e}
header h1{position:absolute; top:0; left:100px;}
header ul.menu:after{display:block; clear:both; content:'';}
header ul.menu{position:absolute; top:20px; right:50px;}
header ul.menu li{float:left; padding:10px 20px; list-style:none;}

a{text-decoration:none; color:#333;}
</style>

 

라우터가 설정된 화면 확인

메인화면

게시판 클릭 메뉴

/#/board/list 이동한 화면