[미니 세미나] Vue router 프론트 기본 페이지 이동 동작 방식

Vue 를 사용한 기본적인 프론트 구조

Vue 에서 router 란?

• 간단히 이야기해서, router-view 라는 html 코드에 내가 등록한 페이지들을 띄워주는 방식.
• 예를 들어, login.vue , signUp.vue 라는 두 파일이 router 에 등록되어 있을 시, router.push(등록한 경로) 를 통해
• 두 파일을 불러오는 방식

Vue 프로젝트 구조

• Header / router-view 두가지로 이루어진 페이지 구조.

<template>
  <div class="background">
    <Header></Header>
    <router-view> </router-view>
  </div>
</template>

• Router 등록 예시

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("../view/home-cover.vue"),
  },
  {
    path: "/roadmap",
    name: "RoadMap",
    component: RoadMap,
  },
]

• Router 사용 예시

redirectWhenModalClosed() {
            this.$router.push('/roadmap');
        },

• 앞서 설명한 방식대로, router 에 등록하여 push 를 통해 이동