0명이 이 글을 좋아합니다!

안녕하세요~

에스비
작성일 22.07.26 09:44 조회수 113
안녕하세요~ 강의를 통해 vue를 공부하다가 궁금한 점이 있어 문의드립니다.
 
새로운 화면을 router 폴더 index.js 파일 안에 등록하는데, 모든 화면을 한 곳(index.js -> routes)에 전부 등록을 해야하는건지,
 
아니면 화면 별로 나누어 정돈하여 관리 할 수 있는지 궁금해서 문의드립니다. 좋은 강의 올려주셔서 감사합니다.
course

Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
0명이 이 글을 좋아합니다!
댓글 1
개발자의 품격
2022.07.26

개발팀에 따라서 index.js 파일 하나 안에서 모든 라우트를 관리하기도 하고 개발하는 애플리케이션의 규모가 큰 경우 route 파일을 업무 별로 여러개로 분리합니다.

이때 분리된 파일에는 예를들어 template.js 라는 라우터에는 아래와 같이 구성하고

const routes = [
{
path: '/template/listtodetail',
name: 'ListToDetail',
component: () =>
import(
/* webpackPrefetch:true, webpackChunkName: "uitemplate" */ '../views/uitemplate/p3/ListToDetail.vue'
)
},
{
path: '/template/detail',
name: 'Detail',
component: () =>
import(
/* webpackPrefetch:true, webpackChunkName: "uitemplate" */ '../views/uitemplate/p3/Detail.vue'
)
}
]

export default routes

 

이런 각각의 라우터 파일을 하나로 합치는 index.js 파일에는 아래와 같이 구성합니다.

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import template from './template'
 

const routes = [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ '../views/About.vue')
},
...template,
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
 

export default router

답글

에스비님의 프로필
에스비
 2022.07.26

아하! 설명 감사합니다!

비슷한 유형의 고민있어요

채널톡 아이콘