안녕하세요~
226
0
안녕하세요~ 강의를 통해 vue를 공부하다가 궁금한 점이 있어 문의드립니다.
새로운 화면을 router 폴더 index.js 파일 안에 등록하는데, 모든 화면을 한 곳(index.js -> routes)에 전부 등록을 해야하는건지,
아니면 화면 별로 나누어 정돈하여 관리 할 수 있는지 궁금해서 문의드립니다. 좋은 강의 올려주셔서 감사합니다.
답변 1
1
개발팀에 따라서 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
무선 공유기 설정 강의 혼란스럽네요
0
330
1