728x90
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>
간단하게 컴포넌트를 작성하고 실행을 시켜보았다.
한 화면에 컴포넌트 두개가 실행이 되는것을 볼수있다!
728x90
'FRAMEWORK > VUE' 카테고리의 다른 글
[vue.js] 같은그림 찾기게임 (1) | 2019.08.13 |
---|---|
vuejs 마우스 오버 이벤트 (0) | 2019.08.03 |
vuejs 개체 가져와서 style바꾸기 (0) | 2019.08.01 |
vue에서 DOMContentLoaded사용하기 (0) | 2019.08.01 |
vuejs에서 버튼 이벤트 생성하기 (0) | 2019.08.01 |