[vue.js]vue-router 튜토리얼-3

개요

이번에는 vue-router의 중첩 라우팅 기능을 간단하게 구현해보겠습니다.

중첩 라우팅은 다음과 같은 개념입니다.(제가 만든 그림입니다.)

구현 방법

간단합니다.

1. 프로젝트 홈/router/index.js 파일을 수정하면 됩니다.

 

children 내부에 router 객체를 정의할 때에 path에는 '/'를 붙히지 않습니다.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
const routes = [
    {
        path: '*',
        redirect: '/404'
    },
    {
        path: '/404',
        name: 'NotFound',
        component: () => import('@/pages/404.vue')
    },
    {
        path: '/adminsetting',
        name: 'admin-setting',
        component: () => import('@/pages/AdminSetting.vue'),
        children: [   // 👈 중첩 라우터 설정
            {
                // /user/user-setting과 일치할 때
                // user-setting은 <router-view 내에 렌더링됩니다.
                path: 'users',
                component: () => import('@/pages/AdminUsersSetting.vue')
            },
            {
                path: 'auth',
                component: () => import('@/pages/AdminAuthSetting.vue')
            },
            {
                path: 'report',
                component: () => import('@/pages/AdminReportSetting.vue')
            },
            {
                path: 'chart',
                component: () => import('@/pages/AdminChartSetting.vue')
            },
            {
                path: 'user',
                component: () => import('@/pages/UserSetting.vue')
            }
        ]
    },
    {
        path: '/login',
        name: 'LOGIN',
        component: () => import('@/pages/Login.vue')
    }
];

const router = new VueRouter({
    mode: 'history',
    scrollBehavior() {
        return { x: 0, y: 0 };
    },
    routes
});

export default router;

export { routes };

 

2. 부모컴포넌트에 <view-router> 넣기

<view-router></view-router>

<template>
    <v-container fluid class="adminSetting d-flex">
        <BaseSideMenu />
        <v-container fluid class="content"> 
            <router-view></router-view> <!-- 👈 중첩 라우터 컴포넌트가 들어갈 자리-->
        </v-container>
    </v-container>
</template>

 

 

감사합다.