[Vue] 11. Router & Component1 : Component파일 분리하기

이전글

2022.05.13 - [웹프로그래밍/Vue] - [Vue] 10. Vue Router 기초

[Vue] 10. Vue Router 기초

 

---

 

 

이전글의 코드를 보면 테스트를 위해 한 component의 template을 짧게 작성하였다.

하지만 상용소스는 이보다 훨씬 길기 때문에, 한 파일에 모든 component를 작성한다면 복잡해진다.

 

각 Component마다 하나의 파일로 분리해서 작성해보자.

 

1. Component 생성하기

 

1. 파일 구조

기존의 html파일과 같은 폴더에 components폴더를 생성한 후, 그 안에 component 파일들을 넣어주었다.

 

 

 

2. Component 파일 내용

1) Main.js

export default {
  template:`<div>메인 페이지</div>`,
}

 

2) BoardList.js

export default {
  template: `<div>
    <h3>게시판 목록</h3>
    <router-link to="/board/detail">글 있다고 가정(상세보기)</router-link>
    </div>`,
};

 

3) BoardDetail.js

export default {
  template: `<div>
  <h3>글 상세 페이지입니다</h3>
  <p>제목 : {{title}}</p>
  <p>내용 : {{content}}</p>
  </div>`,
  data() {
    return {
      title: "안녕하세요",
      content: "나중에 DB에서 가져올게요..",
    }
  },
}

 

 

 

2. router 생성 & 적용

 

1. 외부 파일에 작성한 Component들 불러오기

*script의 type은 module로 설정

<script type="module">
    import Main from './components/Main.js';
    import BoardList from './components/BoardList.js';
    import BoardDetail from './components/BoardDetail.js';
</script>

 

 

2. router에 url과 맵핑

const router = new VueRouter({
    routes:[
        {
            path: '/',
            component: Main,
        },
        {
            path: '/board/list',
            component: BoardList,
        },
        {
            path: '/board/detail',
            component: BoardDetail,
        }
    ]
})

 

 

전체 코드

---

<div id="app">
    <router-link to="/">HOME</router-link> | 
    <router-link to="/board/list">게시판</router-link>

    <router-view></router-view>
</div>

<script type="module">
    import Main from './components/Main.js';
    import BoardList from './components/BoardList.js';
    import BoardDetail from './components/BoardDetail.js';

    const router = new VueRouter({
        routes:[
            {
                path: '/',
                component: Main,
            },
            {
                path: '/board/list',
                component: BoardList,
            },
            {
                path: '/board/detail',
                component: BoardDetail,
            }
        ]
    })

    new Vue({
        el:"#app",
        router,
    })
</script>

---