Router

라우팅 :
웹 페이지 간의 이동 방법

• SPA(Singal Page Application) : 페이지를 이동할 때마다 웹 페이지를 요청하여 갱신하는 것이 아니라 미리 페이지들을 받아 놓고 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 방식

뷰 라우터 : 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 라이브러리

 

라우터 셋팅 :

• 설치 : npm install vue -router@4
• src폴더에 router.js를 만들고main.js에 라우터를 사용한다고 말해줍니다.

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "/경로",
    component: import해온 컴포넌트,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

 

main.js에 라우터를 사용한다고 말해줍니다.

import router from './router'
createApp(App).use(router).mount('#app') // 밑줄 부분 추가

 

nested routes :

const routes = [
	{
		path : '/상위 path',
		component : 상위,
		children : [
			{ path : '하위1', component: 하위1 }, //children에서는 '/'는 빼줍니다.
			{ path : '하위2', component: 하위2 },
		]
	}
]

 

---