vue.js [router모듈 설치 및 사용]

 

라우팅 : 웹 페이지간의 이동하는 방법.

미리 해당하는 모든 컴포넌트 페이지를 받아 놓고 라우팅을 이용해서 그 부분만 화면을 갱신. (화면 전환)

vue에서 제공하는 공식 모듈이다.

 

 

 

 

설치 명령어 : npm install vue-router --save

 

 

 

이제 라우터를 적용할 수 있는 상태가 되었다.

 

 

 

 

게시판 list 컴포넌트 생성

commponents 디렉토리 하위에 board디렉토리, List.vue파일 생성

 

 

 

List.vue

 

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

<script>
export default {
	
}
</script>

<style scoped>

</style>

 

 

 

 

 

src 하위에 routes디렉토리 생성 및 indes.js 파일 생성

 

 

 

 

 

 

 

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
		}
		
	]
})

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

App.vue 파일 수정 (template, import, components)

 

<template>
  <div id="app">
    <!-- 추가된 헤더 컴포넌트 사용 -->
    <Header />

    <router-view/>

    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <!-- 추가된 풋터 컴포넌트 사용 -->
    <Footer />
  </div>
</template>

<script>
import Header from './components/common/Header'; //import 헤더 추가
import Footer from './components/common/Footer'; //import 풋터 추가

export default {
  name: 'App',
  components: {
    Header          //헤더 컴포넌트 추가
    ,Footer         //풋터 컴포넌트 추가

  }
}
</script>

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

 

 

 

 

 

 

 

 

ui화면 확인

 

메뉴바에 게시판 메뉴가 추가되었다.

 

 

 

 

게시판 메뉴를 클릭하면 

게시판 리스트가 나오고 주소가 /board/list로 이동된 것으로 보아 라우터 설정이 성공적으로 완료되었다는것을 볼 수 있다!