1. vue Router 디자인

이러한 방식이 정답이라는 것은 아니지만 내가 프로젝트를 진행하며 vue 프로젝트의 라우터 구조를 짰던 방식에 대하여 기술한다.

* vite, vue3, 타입스크립트 환경임

vue에는 vue-router라는 일반적으로 프론트 라우트를 관리하는 모듈을 사용한다.

node.js 깔고 cmd에서 npm i vue-router

먼저 라우터의 '경로' 만을 저장하는 라우트 route.ts 파일을 만든다.

router/route.ts

import type { RouteRecordRaw } from "vue-router";

export const route: RouteRecordRaw[] = [{}]

얘가 route 라는 이름으로 경로를 던져줄것이다.

그 경로를 가져다 쓰는 라우터를 생성한다.

createRouter => 라우터를 만듦
createWebHistory =>
import.meta.env.BASE_URL => vite 루트경로

router/index.ts

import { createRouter, createWebHistory } from "vue-router";
import { route } from "@/router/routes";

const router = createRouter({
	history: createWebHistory(import.meta.env.BASE_URL);
    routes: route
});

* 왜 나눴음?

이렇게 route와 router를 나누는 이유는 토이프로젝트가 아닌
실질적인 프로젝트에서는 route가 너무 길다.

그래서 경로는 route.ts에서 관리.
라우트 접근 전/후에 일어나는 이벤트들은 index.ts에서 관리하려고 분할하는 것이다.
ex) 라우트 접근전 로그인 여부, 권한 확인 etc..