vuejs 컴포넌트 출력하기

vue공부를 한참하고 있던 지금 컴포넌트의 편리성을 깨닫고 있다. 하지만 한페이지에 컴포넌트 두개를 올리고싶을 때는 어떻게 해야될까?

 

바로 router에 children을 이용하는 것이다. 

 

// index.js

import Compo1 from '@/components/Component1'
import Compo2 from '@/components/Component2'

Vue.use(VueRouter)

const router = new VueRouter({
	mode: 'history',
    routes: [
    	{path '/',
          component: Compo1,
          children: [{path: '/', component: Compo2}]}
    ]
})

export default router

 

코드 설명을 하자면 chidren은 중첩된 뷰를 생성해주는 것이다. children내부의 path는 주소가 / 일때 Compo2 컴포넌트를 출력한다는 말이다. 

 

//Component1

<template>
    <div>
        첫번째 컴포넌트!
        <router-view>
        </router-view>
    </div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

//Compopnent2

<template>
    <div style="marginTop: 15px">
        두번째 컴포넌트!
    </div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

 

간단하게 컴포넌트를 작성하고 실행을 시켜보았다.

한 화면에 컴포넌트 두개가 실행이 되는것을 볼수있다!