뷰 라우터 (Vue Router) - 네임드 뷰(Named View)

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다.

Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다.

 

---

뷰 라우터 (Vue Router)

뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리를 의미합니다.

뷰 라우터는 총 3가지(기본 라우터, 네스티드 라우터, 네임드 뷰)가 있으며,

본 글에서는 네임드 뷰에 대해서 정리하였습니다.

 

네임드 뷰 (Named View)

• 한 화면에 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식
• 네스티드 라우터와의 차이점
  • 네스티드 라우터: 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식
  • 네임드 뷰: 같은 레벨에서 여러 개의 컴포넌트를 한번에 표현하는 형식

 

사용 태그

네임드 뷰 구현시 기본적인 설정 외 구현부에서 사용하는 태그로 <router-link>와 <router-view>, 총 2가지가 있습니다. 

• <router-link to="URL">: 페이지 이동 태그로 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동하는 기능
• <router-view name="컴포넌트 명">
  • 페이지 표시 태그로 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 표시하는 기능
  • 'name="컴포넌트 명"'이 생략된 경우 디폴트 컴포넌트가 지정됨

 

형식

<template>
	<div>
		// 라우팅 결과(URL 값 갱신)에 따른 화면이 표시되는 영역
                <router-view name="컴포넌트 명"></router-view>
	</div>
</template>

 

사용 예시

src\App.vue

뷰 라우터를 통해 라우팅 링크 텍스트가 표시될 부분과 라우팅할 컴포넌트가 표시될 영역을 구현합니다.

<template>
	<div>
		// ☆ 참고: 갱신된 URL에 해당하는 화면을 보여주는 영역
		<router-view name="header"></router-view>
		<router-view></router-view>
		<router-view name="footer"></router-view>
	</div>    
</template>

...

 

src\views\TheBody.vue 그리고 src\views\TheHeader.vue 그리고 src\views\TheFooter.vue

라우팅된 결과로 화면에 보여줄 하위 컴포넌트를 구현합니다. 

<template>
    <div>
        <h3>User The Header/Body/Footer Component</h3>
    </div>
</template>

...

 

src\router\index.js 혹은 src\router.js

뷰 라우터를 이용하기 위해 필요한 뷰 라우터 정보를 구현합니다.

아래 코드에서 뷰 기본 라우터와의 가장 큰 차이점은 routes 변수 내 components 속성에 컴포넌트 별칭을 정의한 곳입니다. 

import { createRouter, createWebHistory } from 'vue-router'

// 라우팅될 컴포넌트 정보
import Body from '../views/TheBody.vue';
import Header from '../views/TheHeader.vue';
import Footer from '../views/TheFooter.vue';


// 라우팅될 컴포넌트 정보를 담는 변수
const routes = [
    {
        path: "/",
        name: "main",
        components: {
            default: Body,
            header: Header,
            footer: Footer
        }
    }
];

// 라우터 정보
const router = createRouter({
    history: createWebHistory(),
    // ☆ 참고: history 모드를 통해 라우터 URL의 해시 값(#)을 없앨 수 있음
    routes,
})

export default router;

 

src\main.js

뷰 인스턴스에 뷰 라우터 정보를 추가합니다.

아래 코드는 기본 라우터 실습시 사용한 코드와 동일한 코드입니다. 

/* main.js */
import { createApp } from 'vue';
import App from './App.vue';

import router from './router/index.js';	// ☆ 참조: 뷰 라우터를 사용하기 위해 설정

createApp(App)
.use(router)		// ☆ 참조: 뷰 라우터를 사용하기 위해 설정
.mount('#app');

 

결과

기본 경로인 localhost:8080에서는 아래와 같이 설정한 header와 footer, default로 지정한 body의 내용이 표시되는 것을 확인할 수 있습니다.

( 화면에 표시되는 영역을 가시적으로 보여주기 위해 위 사용 예시 코드에 style을 더 선언해주었습니다. )

 

---

References

• Do it! Vue.js 입문: https://search.shopping.naver.com/book/catalog/32489500759?cat_id=50010881&frm=PBOKPRO&query=do+it%21+vue&NaPm=ct%3Dlaapzz40%7Cci%3D7954ed9cc7559ee7393564e5030b0438bd5c1fcd%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3Df6d2ac807b583005130cba7e92538e147334e7bd

Do it! Vue.js 입문 : 네이버 도서

• Simplevue: https://simplevue.gitbook.io/intro/vue.js

Vue.js 란 ? - simpleVue