1. 중첩된 라우터란?
라우터가 Component들을 전환하는 구간 안에, 또 라우터가 전환하는 구간이 있는 구조를 말한다.
아래 그림에서 Router1에서는 Main화면, Board화면을 바꿔주며, Router2에서는 Board안의 List, Detail 등으로 Component를 전환시켜준다.
2. 중첩된 라우터 구현
1. 파일 구성
*app.js = html에서 script코드를 분리한 것으로, router설정이 있음
2. Components 코드
1) test.html
더보기
<body>
<div id="app">
<router-link to="/">HOME</router-link> |
<router-link to="/board">게시판</router-link>
<router-view></router-view>
</div>
<script type="module" src="app.js"></script>
</body>2) Main.js : 홈 화면
더보기
export default {
template:`<div>메인 페이지</div>`,
}3) Board.js
더보기
export default {
template: `<div>
<h3>게시판 페이지</h3>
<router-view></router-view>
</div>`,
}4) BoardList.js
더보기
export default {
template: `<div>
<h3>게시판 목록</h3>
<router-link :to="{name: 'detail', params:{no:3}}">글 있다고 가정(상세보기)</router-link>
<router-link :to="{name:'register'}">등록</router-link>
</div>`,
};5) BoardDetail.js
더보기
export default {
template: `<div>
<h3>{{no}}번 글 상세 페이지입니다</h3>
<p>제목 : {{title}}</p>
<p>내용 : {{content}}</p>
</div>`,
data() {
return {
no: 0,
title: "안녕하세요",
content: "나중에 DB에서 가져올게요..",
}
},
created() {;
this.no = this.$route.params.no;
},
}6) BoardRegister.js
더보기
export default {
template:`<div>글 작성하는 페이지</div>`,
}
3. Router 설정하기 : app.js
Board의 children에 중첩 router를 작성한다.
이때 children안에 들어가면서 알아서 '/'를 붙여주기 때문에 또 /를 붙이면 제대로 작동하지 않는다.
redirect를 사용한 이유는 Board에 처음 들어갔을 때는 list 컴포넌트로 화면을 구성해서 보여주겠다는 의미다.
import Main from './components/Main.js';
import Board from './components/Board.js';
import BoardList from './components/board/BoardList.js';
import BoardDetail from './components/board/BoardDetail.js';
import BoardRegister from './components/board/BoardRegister.js';
const router = new VueRouter({
routes: [
{
path: '/',
name: 'main',
component: Main,
},
{
path: '/board',
name: 'board',
component: Board,
redirect: "/board/list",
children: [
{
path: 'list',
name: 'list',
component: BoardList,
},
{
path: 'detail',
name: 'detail',
component: BoardDetail,
},
{
path: 'register',
name: 'register',
component: BoardRegister,
}
]
},
]
});
new Vue({
el:"#app",
router,
})
실행 화면
게시판 페이지 내에, 목록, 상세, 작성 페이지가 전환되는 것을 확인할 수 있다.
'Programming > Vue' 카테고리의 다른 글
| [Vue] 15. Vue-cli 프로젝트 구조 (0) | 2022.05.15 |
|---|---|
| [Vue] 13. 수식어 (0) | 2022.05.14 |
| [Vue] 11. Router & Component1 : Component파일 분리하기 (0) | 2022.05.13 |
| [Vue] 10. Vue Router 기초 (0) | 2022.05.13 |
| [Vue] 06. Component의 개념과 기본 사용법 (0) | 2022.05.12 |