Vue 실무 라우터 구조 관련

Question

안녕하세요, 기존 jsp로 구성된 페이지를 vue 로 전환하는 프로젝트를 진행중입니다.기존 프로젝트 메뉴가 수백개 되다보니 router를 어떻게 구성해야할지 고민이 많이 되네요..DB에서 메뉴 정보를 불러오고 이를 토대로 vue에서 addRoute로 동적 할당모든 페이지를 정석적으로 router에 수동으로 추가1번 방안을 적용해볼까 고민했으나, 사이드이펙트가 있을수도 있을것 같고, vue 실무 경험이 적다 보니 실제로 쓰이는지 잘 모르겠네요..혹시 이 부분에 대해 어떻게들 생각하실까요?

신도림산당 · Accepted Answer

2번이 보통 실무에서 많이 사용합니다. 동적 할당은 안정성이 떨어져요.메뉴별로 쪼개서 하위 라우터 넣고 관리 하시면 될것 같아요./├── dashboard (1뎁스)│ ├── stats (2뎁스)│ │ └── detail/:id (3뎁스)│ └── reports├── settings│ └── profile (2뎁스)└── loginconst routes = [ { path: '/', component: () => import('@/layouts/BaseLayout.vue'), // 공통 레이아웃 children: [ { path: 'dashboard', component: () => import('@/views/Dashboard.vue'), children: [ { path: 'stats', component: () => import('@/views/dashboard/Stats.vue'), children: [ { path: 'detail/:id', component: () => import('@/views/dashboard/Detail.vue') } ] }, { path: 'reports', component: () => import('@/views/dashboard/Reports.vue') } ] }, { path: 'settings', component: () => import('@/views/Settings.vue'), children: [ { path: 'profile', component: () => import('@/views/settings/Profile.vue') } ] } ] }, { path: '/login', component: () => import('@/views/Login.vue') }]const router = createRouter({ history: createWebHistory(), routes})export default router

캐티 · Answer

정답이 없는 거여도 웹어플이 아닌 이상 앵간한 웹사이트 들은 메뉴가 이케이케 아주 많아지는거 아나요. 이럼 망하는 거여서 나는 vuejs를 사용한다 이럼 의존성 모듈이 생기지 아니하는 정책을 두어요. 이케 대면 경로들을 fetch 같은 거로 직접 제어하여야 하게쩌. 이거 심하게 어려운거 아니어요.위에 처럼 이유가 있었다 하더라도 개발자가 싫어하면 댔어요. 망하더라도 대충 될대로 해버리는 경우가 이쩌.

오리구이 · Answer

엥? 무조건 1번으로 해야죠!!!

찰쿠떡키 · Answer

디비에 엔드포인트 다 들어가있으면 1번으로 해야죠

Kunie · Answer

수동으로 추가하셔야 합니다.어차피 라우트에 등록되어야하는 뷰는 하나하나 다 만들어주실텐데, 굳이 라우트를 동적으로 할당해줄 이유는 없다고봅니다.동적으로 할당하는 대개의 경우는 플러그인 입니다. 대표적으로는 OAuth2 Authorization Code 인증을 할 때에는 Redirect 할 라우트가 필요하기 때문에 OAuth2 플러그인 확장모듈을 만들때 용이하겠죠.

소문 · Answer

컴포넌트가 맵핑되야하가 때문에 동적할당이 안되죠. 해보시면 알꺼에요. 그리고 nuxt사용을 고려해보세요

프로폴리스 · Answer

음....뷰 라우터에서 동적 할당하는 것은 굳이 추천하지 않습니다.일반 운영할 때는 괜찮아요.그런데..코드 새로 배포하면 새로고침 지옥을 만나게 되어요....최상단 메인루트까지 가서 새로고침 해야됩니다. 가급적 프론트에서 다 하셔야 합니다.

Vue 실무 라우터 구조 관련

7개의 답변

Q&A 목록