vue.js 라우터 링크에 따라 변하는 컴포넌트

입학정보 페이지를 만드는 중이다. 

<NavTop> 컴포넌트 안에

router-link :to="/guide/notice"

router-link :to="/guide/qna" 등의 링크를 걸어놓으면

 

Guide라는 컴포넌트를 불러오게 되는데 

Guide 라는 컴포넌트 안에 여러 컴포넌트들을 import 해놓고 $router.params의 값을 읽어 하단 영역에 출력하게 된다.

 

처음엔 div 태그에 v-if를 걸어서 $router.params.board === "notice" 식으로 조건문을 걸어야 하나. 

조건문을 함수로 만들어야 하나 하다가 엄청 심플한 방법을 찾게됐다. 

 

1. data()에 변수 선언

- selectedComponent는 $router.params.board 값이 있으면 그 값이 set 되고, 아니라면 보여줄 default 컴포넌트 명을 적어준다. 

import Application from "./EntranceBoard/ApplicationGuideline.vue";
import Faq from "./EntranceBoard/FAQ.vue";
import Notice from "./EntranceBoard/NoticeBoard.vue";
import Qna from "./EntranceBoard/QnA.vue";

export default {
  name: "EntranceBoard",
  data() {
    return {
      selectedComponent: this.$route.params.board
        ? this.$route.params.board
        : "Notice",
    };
  },
  components: {
    Application,
    Faq,
    Notice,
    Qna,
  },

2. 컴포넌트가 출력될 div 영역에 아래와 같이 선언

- 라우터 파라미터 값을 기반으로 set된 selectedComponent 값에 따라 화면에 출력되는 컴포넌트가 결정된다.  

<component :is="selectedComponent"/>