[Vue] Vue Router 라우트 중첩 및 리다이렉트

- 지난 시간

안녕하세요. 지난 시간에는 Vue Router를 활용해서 데이터를 전달하는 방법에 대해 알아봤습니다.

 

놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다.

any-ting.tistory.com/46 

[Vue] Vue Router 데이터 전달하기

- 개요

이번 시간에는 라우트 중첩과 리다이렉트에 대해 알아보겠습니다.

 

라우트 중첩은 무엇일까요? 사실은 라우트 중첩보다는 컴포넌트 중첩이라고 생각하는 게 이해될 거예요.

 

컴포넌트 중첩을 활용하면 싱글 페이지 애플리케이션에 맞게 만들 수 있습니다.

 

EX)

 우리는 메인 화면에서 고정적인 UI가 있습니다. Head, Footer 아니면 Side Bar와 같은 UI 이는 항상 고정적입니다.

 부모 컴포넌트에서는 Head, Footer UI를 만들고 가운데 콘텐츠에는 자식 컴포넌트로 렌더링 한다면 좀 더 효율적이겠죠. :)

 

 

리 다리 렉트는 특정 URL로 접속했을 때 다른 URL로 보내는 기능입니다. 너무 어렵지 않아서 라우트와 같이 설명하겠습니다.

  

- 라우트

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '@/views/Login.vue';
import LoginLayout from '@/layouts/LoginLayout.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    redirect: "/login",
    component: LoginLayout,
    children: [{
      path: '/login',
      name: "Login",
      component: Login
    }],
  },
  {
    path: '/main',
    name: 'Main',
    component: () => import('@/views/Main.vue'),
    children: [
    {
      path: 'home',
      name: "Home",
      component: () => import('@/components/Home.vue')
    },
    {
      path: 'setting/:id',
      name: "Setting",
      component: () => import('@/components/Setting.vue')
    }
  ],
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

 중첩하는 방법은 children을 활용하면 됩니다.

 

children 상위 영역은 "부모 컴포넌트" , children 영역은 자식 컴포넌트입니다.

 

그리고 redirect 코드가 있습니다. path : '/'  루트 경로로 접근하면 redirect : '/login' 로그인 페이지로 이동

 

 직접 구현을 통해 확인하시는 걸 추천드리겠습니다. :)