월루를 꿈꾸는 대학생

[Vue] router-view 본문

Programing/Vue

[Vue] router-view

하즈시 2023. 11. 10. 22:53
728x90

라우팅을 통해 변경되는 컴포넌트의 내용을 표시 

 

라우터가 변경될 때 마다 즉 url이 변경이 될 때마다 그에 맞는 정보를 route파일에서 찾아서 해당하는 url과 컴포넌트를 확인한다

그 후에 해당 컴포넌트를 빌드함 ! 

동적인 컴포넌트 전환 및 다른 경로를 탐색할 때 쓴다 

 

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
];

const router = new VueRouter({
  routes
});

 

 

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // ...
}
</script>

 

url 맞는 컴포넌트르 자동으로 빌딩해주니까 아주 달달한 컴포넌트다

728x90

'Programing > Vue' 카테고리의 다른 글

[Vue] $data  (0) 2023.11.11
[Vue] router-link  (0) 2023.11.10
[Vue] npm run dev  (0) 2023.11.03