2021.05.31

브랜치: main-page

✨ Vue3 vue-router-next 사용하기

1. vue router next 설치하기

: vue-router 4버전 이상을 설치한다.

#shell
// 기존의 vue-router 버전이 낮을 경우 삭제한다.
npm uninstall vue-router --save

npm i vue-router@next --save

2. vue-router 모듈을 관리할 'src/router/index.js'파일 생성

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

const routes = [
	{
		path: '/',
		name: 'Home',
		// 1.
		component: () => import('@/views/Home.vue'),
	},
];

const router = createRouter({
	// 2. 
	history: createWebHistory(),
	routes,
});

export default router;

1. Webpack의 코드 스플리팅을 이용해서 현재 라우트에 해당하는 컴포넌트를 동적 로딩한다. 이를 통해서 페이지의 초기 로딩 속도를 줄일 수 있다.
2. window history 모드를 적용 (vue-router 이전 버전에서는 mode: 'history')
   전체적으로 이전 버전과 사용하는 방법은 거의 유사한것 같다.

3. 'main.js'에서 router 모듈 적용하기

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

// css
import '@/assets/scss/_index.scss';

const app = createApp(App);
app.use(router);
app.mount('#app');

4. router-view를 이용해서 현재 라우트에 해당하는 컴포넌트 렌더링

- App.vue

<!-- App.vue -->
<template>
	<div class="app">
		<AppHeader />
		<main class="app-main">
			<!-- 컴포넌트가 렌더링되는 영역 -->
			<router-view></router-view>
		</main>
		<AppFooter />
	</div>
</template>

- '/'경로에 Home 컴포넌트가 렌더링된 화면

5. ✨ Vue3 vue-router에서 Page not found 처리하기

이전 버전에서는 path: '*'로 작성하면 됐었지만 vue-router-next에서는
path: "/:catchAll(.*)"로 작성해야한다.

// src/router/index.js
routes: [
  {
    path: "/:catchAll(.*)",
    component: () => import("@/views/NotFound.vue"),
  },
]

- 잘못된 경로에 접근했을 때 NotFound 컴포넌트가 렌더링된 화면

6. 현재 브랜치까지 완성된 프로젝트 폴더 구조

😊 참고

• vue3 vue-router tutorial
• vue3 vue-router 살펴보기
• vue-router-next 공식 문서