Router 에서 Body 만 바꾸겠다고 1시간 가량 삽질을 한 기록이다.
- 일단, router.js 에서 Body 컴포넌트의 하위 컴포넌트로 링크에 따른 컴포넌트를 정의한다.
import Vue from 'vue';
import VueRouter from 'vue-router'
import LoginComp from "../components/body/LoginComp";
import Body from "../components/Body";
import Carousel from "../components/body/Carousel";
Vue.use(VueRouter);
export const router = new VueRouter({
mode: 'history',
routes: [
{path: '/', component:Body, children:[
{path: 'login', component: LoginComp},
{path: '', component: Carousel}
]},
]
});
App.vue
<template>
<div id="app" class="container-fluid">
<Header></Header>
<Body></Body>
<Footer></Footer>
</div>
</template>
Body.vue 에서 넘어갈 컴포넌트를 하위 컴포넌트로 지정하고 <router-view> 태그로 그때그때 변경하게끔한다.
<template>
<div id="body">
<router-view></router-view>
</div>
</template>
<script>
import Carousel from "./body/Carousel";
import LoginComp from "./body/LoginComp";
export default {
name: "Body",
components: {
Carousel,LoginComp
},
}
</script>
<style scoped>
#body{
height: 200%;
}
</style>
'작업하면서 배우는 것들' 카테고리의 다른 글
| ObjectMapper 에서 Long 이나 Integer 등 Wrapper 타입 맵핑이 안됨 (0) | 2020.12.22 |
|---|---|
| Zipkin 에 서비스가 등록되지 않아 로그 트레이싱이 안 될 때 (0) | 2020.12.22 |
| Sleuth 사용 중 커멘드라인이 너무 길다는 메시지 (0) | 2020.12.22 |
| JPA Query DSL 그레이들에 적용하기 (0) | 2020.12.21 |
| 엑셀 파싱 기본. (0) | 2020.10.15 |