[vuejs] vue-router 중첩 라우팅

 

// App.vue : 최상위 outlet

<template>
  <AppHeader></AppHeader> 
  <router-view></router-view>
  <AppFooter></AppFooter> 
</template>

이 곳에 렌더링되는 컴포넌트가 최상위 outlet이 될 수 있다. 렌더링된 하나의 컴포넌트 안에 여러개의 중첩된 컴포넌트가 포함될 수 있다.

// About.vue

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

<script>
export default {
  name: "About",
};
</script>

<style></style>

 

App.vue라는 가장 바깥의 컴포넌트 안에 About.vue가 렌더링되고

About.vue 안에서 또 Info1.vue, Info2.vue가 렌더링되는 구조이다.

 

children을 사용하여 중첩 라우팅을 할 수 있다.

import Main from "@/views/Main.vue";
import DiarydWrite from "@/views/DiaryWrite.vue";
import Info1 from "@/views/Info1.vue";
import Info2 from "@/views/Info2.vue";

const routes = [
  {
    path: "/",
    name: "Main",
    component: Main,
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
    children: [
      {
        path: "info1",
        component: Info1,
      },
      {
        path: "info2",
        component: Info2,
      },
    ],
  },
];
export default routes;

 

url : http://localhost:8080/about/info2

 

url : http://localhost:8080/about/info1