routes : name 은 동일한 값이 있으면 안됨
componet :
어떠한 컴포넌트를 연결할지 정보를 담고 있음
import 를 해서 넣을수 있고
화살표함수 를 사용해서 넣을수 있음
import 한 후 componet에 추가한 애들은 app.js 에 추가가 됨
- import 방식
아래의 방식으로 하면 app.js 에 포함되어 있음
=================================================================================================================
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
=================================================================================================================
- componet에 바로 추가하는 방식
이 방식으로 하면 해당 컴포넌트를 호출하게되면 about.js 가 크롬의 네트워크에 뜸 ( app.js에 들어가 있지 않음)
또한 /* webpackChunkName: "about" */ 이부분에 내가 별도로 어떠한 이름으로 뜰지 지정을 해줄수 있음
=================================================================================================================
{
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: "ababab" */ '../views/AboutView.vue')
},
=================================================================================================================
webpackChunkName 을 지정하지 않으면 경로까지 뜸 -> src_views_test-001_vue.js
=================================================================================================================
component: () => import('../views/test-001.vue')
=================================================================================================================
- Prefetch
당장쓸것은 아니지만 나중에 쓸거라서 캐시에 등록함
용량이 큰 js 파일들을 Prefetch 받아와서 캐쉬에 저장해놓은 뒤에 사용,
용량이 크더라도 사용자가 해당 페이지에 접근하면 금방금방 쓸수 있음
다만 Prefetch로 너무많이 등록하면 초기에 페이지가 로딩되는 시간이 길어짐
=================================================================================================================
component: () => import(/* webpackChunkName: "ababab" , webpackPrefetch : true */ '../views/AboutView.vue')
=================================================================================================================
=================================================================================================================
views 폴더 밑에 vue 파일 생성
test-001.vue
{
path: ‘/test’,
name: ‘test’,
component: () => import(‘../views/test-001.vue’)
}
=================================================================================================================