Vue의 Router 설정과 main.js

Router 설정

Router 설치(프로젝트 폴더에서 진행)

`vue add router`

 

 

수동으로 프로젝트를 생성하지 않고 default로 프로젝트를 생성하게 되면 Router를 따로 설치해 줘야 하며, 설치 방법은 아래와 같다.

// Router 설치(프로젝트 폴더에서 진행)
`vue add router`

// 이후 src/router/index.js에서 라우트 설정할 수 있으며 객체는 path, name, component 등을 요소로 갖음
const routes = [
  	{
    	path: "/",
    	name: "home",
    	component: HomeView,
  	}
  ];
  
const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
	routes,
});

export default router;

 

 

Lazy Loading 적용

component: () => import('../views/AboutView.vue')

 

 

 

main.js

main.js는 App.vue에 router가 사용될 수 있도록 하고, App.vue를 index.html에서 id 값이 app인 요소에 마운트를 시켜주는 역할을 한다. 더 나아가 mixin을 활용해 공통으로 사용되는 메서드를 사용할 수 있게 해주기도 하는 등 많은 역할을 수행하기도 한다.