Vue Router

 

 

 

 

 

 

 

 

 

<style scoped>

- 저 안에 들어있는 특정 HTMl 요소에만 스타일을 적용하는 HTML 요소

 

 

 

<Vue router 문법>

<router-link to="경로" class="클래스명"></router-link>

- to는 라우팅된 페이지의 URL 경로를 나타냄 해당 경로의 컴포넌트를 렌더링한다

 

 

const router = createRouter({
	//뒤로가기,앞으로가기 설정같은 거랍니다..
	history: createWebHistory(import.meta.env.BASE_URL),
routes:[
{
	//루트설정
	path:'/',
    //Home컴포넌트와 연결
    component: Home,
},
{
	///restaurant/list 경로 설정
	path: '/restaurant/list',
    namte: 'restaurantList',
    //RestaurantList 컴포넌트와 연결
    component: RestaurantList,
},
{
	path: '/admin',
    name: 'admin',
    component: AdminLayout,
    children: [
    	// "/admin" 경로에 대한 설정: AdminLayout 컴포넌트와 연결하며, 하위 경로(childrean) 설정 시작
    	{path:'dashboard', component: AdminDashboard},
        //등등 더 있는데 생략...
    ]
}

//vue router 인스턴스 내보내기
export default router

]
})