Vue Router 핵심 정리

1
npm i vue-router

1
2
3
4
5
6
7
8
├─src/
│  ├─routes/
│  │  ├─pages/
│  │  │  ├─AboutPage.vue
│  │  │  └─HomePage.vue
│  │  └─index.ts
|  ├─App.vue
│  └─main.ts

1
2
3
<template>
  <h1>Home page!</h1>
</template>

1
2
3
<template>
  <h1>About page!</h1>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { createRouter, createWebHistory } from 'vue-router'
import HomePage from './pages/HomePage.vue'
import AboutPage from './pages/AboutPage.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: HomePage
    },
    {
      path: '/about',
      component: AboutPage
    }
  ]
})

export default router

1
2
3
4
5
6
7
import { createApp } from 'vue'
import App from './App.vue'
import router from './routes'

createApp(App)
  .use(router)
  .mount('#app')

1
2
3
4
5
6
7
<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
├─src/
│  ├─components/
│  │  └─TheHeader.vue
│  ├─routes/
│  │  ├─layouts/
│  │  │  ├─DefaultLayout.vue
│  │  │  ├─EmptyLayout.vue
│  │  │  └─LayoutProvider.vue
│  │  ├─pages/
│  │  │  ├─AboutPage.vue
│  │  │  └─HomePage.vue
│  │  └─index.ts
|  ├─App.vue
│  └─main.ts

1
2
3
4
5
6
7
8
<template>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
</template>

1
2
3
4
5
6
7
8
<script setup lang="ts">
import TheHeader from '@/components/TheHeader.vue'
</script>

<template>
  <TheHeader />
  <slot />
</template>

1
2
3
<template>
  <slot />
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { createRouter, createWebHistory } from 'vue-router'
import HomePage from './pages/HomePage.vue'
import AboutPage from './pages/AboutPage.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: HomePage,
      meta: {
        layout: 'Default'
      }
    },
    {
      path: '/about',
      component: AboutPage,
      meta: {
        layout: 'Empty'
      }
    }
  ]
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script setup lang="ts">
import { RouterView, useRoute } from 'vue-router'
import Default from './DefaultLayout.vue'
import Empty from './EmptyLayout.vue'

// 라우터 인터페이스 확장
declare module 'vue-router' {
  interface RouteMeta {
    layout?: keyof typeof layouts
  }
}

// 사용할 레이아웃 목록 지정
const layouts = {
  Default,
  Empty
} as const

// 현재 라우트 객체(정보) 가져오기
const route = useRoute()
</script>

<template>
  <!-- 동적 레이아웃 출력 및 기본 레이아웃 지정 -->
  <Component :is="layouts[route.meta.layout || 'Default']">
    <RouterView />
  </Component>
</template>

1
2
3
4
5
6
7
<script setup lang="ts">
import LayoutProvider from '@/routes/layouts/LayoutProvider.vue'
</script>

<template>
  <LayoutProvider />
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
routes: [
  {
    path: '/admin',
    meta: {
      layout: 'Empty'
    },
    children: [
      {
        path: '',
        component: AdminHomePage
      },
      {
        path: 'users',
        component: AdminUsersPage,
        meta: {
          layout: 'Default'
        }
      }
    ]
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ...

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior(_to, _from, savedPosition) {
    if (savedPosition) return savedPosition
    return { top: 0, left: 0 }
  },
  routes: [
    // ...
  ]
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>

<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>
</template>

<style scoped>
nav {
  display: flex;
  gap: 10px;
}
.router-link-exact-active {
  font-weight: bold;
  color: red;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <RouterLink :to="`/movies/${movieId}?plot=full#title`">
    페이지 이동
  </RouterLink>
  
  <RouterLink
    :to="{
      path: `/movies/${movieId}`,
      query: { plot: 'full' },
      hash: '#title'
    }">
    페이지 이동
  </RouterLink>
  
  <RouterLink
    :to="{
      name: 'MovieDetails',
      params: { movieId },
      query: { plot: 'full' },
      hash: '#title'
    }">
    페이지 이동
  </RouterLink>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// ...

const router = createRouter({
  // ...
  routes: [
    {
      name: 'Home',
      path: '/',
      component: HomePage
    },
    {
      name: 'About',
      path: '/about',
      component: AboutPage
    },
    {
      name: 'SignIn',
      path: '/signin',
      component: SignInPage
    },
    {
      name: 'Movies',
      path: '/movies',
      component: MoviesPage,
      children: [
        {
          name: 'MovieDetails',
          path: ':movieId',
          component: MovieDetailsPage
        }
      ]
    },
    {
      name: 'NotFound',
      path: '/:pathMatch(.*)*',
      component: NotFoundPage
    }
  ]
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├─src/
│  ├─components/
│  │  └─TheHeader.vue
│  ├─routes/
│  │  ├─layouts/
│  │  │  ├─DefaultLayout.vue
│  │  │  ├─EmptyLayout.vue
│  │  │  └─LayoutProvider.vue
│  │  ├─pages/
│  │  │  ├─AboutPage.vue
│  │  │  ├─HomePage.vue
│  │  │  └─MovieDetailsPage.vue
│  │  └─index.ts
|  ├─App.vue
│  └─main.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

interface Movie {
  imdbID: string
  Title: string
  Poster: string
}

const route = useRoute()
const movie = ref<Movie | null>(null)

async function fetchMovieDetails(movieId: string) {
  const res = await fetch(`https://omdbapi.com/?apikey=7035c60c&i=${movieId}`)
  movie.value = await res.json()
}

watch(
  () => route.params.movieId as string,
  movieId => fetchMovieDetails(movieId),
  { immediate: true } // 첫 진입에서도 한 번 호출합니다.
)
</script>

<template>
  <template v-if="movie">
    <h1>{{ movie.Title }}</h1>
    <img
      :src="movie.Poster"
      :alt="movie.Title" />
  </template>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ...
import MovieDetailsPage from './pages/MovieDetailsPage.vue'

const router = createRouter({
  // ...
  routes: [
    // ...
    {
      name: 'MovieDetails',
      path: '/movies/:movieId',
      component: MovieDetailsPage
    }
  ]
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>

<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
      <RouterLink to="/movies/tt4154796">Movie(Avengers: Endgame)</RouterLink>
    </nav>
  </header>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
├─src/
│  ├─components/
│  │  └─TheHeader.vue
│  ├─routes/
│  │  ├─layouts/
│  │  │  ├─DefaultLayout.vue
│  │  │  ├─EmptyLayout.vue
│  │  │  └─LayoutProvider.vue
│  │  ├─pages/
│  │  │  ├─AboutPage.vue
│  │  │  ├─HomePage.vue
│  │  │  ├─MovieDetailsPage.vue
│  │  │  └─MoviesPage.vue
│  │  └─index.ts
|  ├─App.vue
│  └─main.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink } from 'vue-router'

interface Movie {
  imdbID: string
  Title: string
}

const searchTitle = ref('')
const movies = ref<Movie[]>([])

async function fetchMovies() {
  const res = await fetch(
    `https://omdbapi.com/?apikey=7035c60c&s=${searchTitle.value}`
  )
  const { Search } = await res.json()
  movies.value = Search
}
</script>

<template>
  <div>
    <h1>Movies page!</h1>
    <div>
      <input
        v-model="searchTitle"
        @keydown.enter="fetchMovies" />
      <button @click="fetchMovies">검색</button>
    </div>
    <ul>
      <li
        v-for="movie in movies"
        :key="movie.Title">
        <RouterLink :to="`/movies/${movie.imdbID}`">
          {{ movie.Title }}
        </RouterLink>
      </li>
    </ul>
    <RouterView />
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// ...
import MoviesPage from './pages/MoviesPage.vue'
import MovieDetailsPage from './pages/MovieDetailsPage.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ...
    {
      name: 'Movies',
      path: '/movies',
      component: MoviesPage,
      children: [
        {
          name: 'MovieDetails',
          path: ':movieId',
          component: MovieDetailsPage
        }
      ]
    }
  ]
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script setup lang="ts">
// ...
import { useRouter } from 'vue-router'

// ...

const router = useRouter()

function closeModal() {
  // 자식 라우트에서 벗어나면 모달이 닫힙니다.
  router.push('/movies')
}
</script>

<template>
  <div class="modal">
    <div
      class="overlay"
      @click="closeModal" />
    <div class="content">
      <template v-if="movie">
        <h1>{{ movie.Title }}</h1>
        <img
          :src="movie.Poster"
          :alt="movie.Title" />
      </template>
    </div>
  </div>
</template>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.content {
  position: relative;
  max-width: 500px;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- ... -->

<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
      <RouterLink to="/movies">Movies</RouterLink>
      <RouterLink to="/movies/tt4154796">Movie(Avengers: Endgame)</RouterLink>
    </nav>
  </header>
</template>

<!-- ... -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
├─src/
│  ├─components/
│  │  └─TheHeader.vue
│  ├─routes/
│  │  ├─layouts/
│  │  │  ├─DefaultLayout.vue
│  │  │  ├─EmptyLayout.vue
│  │  │  └─LayoutProvider.vue
│  │  ├─pages/
│  │  │  ├─AboutPage.vue
│  │  │  ├─HomePage.vue
│  │  │  ├─MovieDetailsPage.vue
│  │  │  ├─MoviesPage.vue
│  │  │  └─NotFoundPage.vue
│  │  └─index.ts
|  ├─App.vue
│  └─main.ts

1
2
3
<template>
  <h1>404 Not Found page!</h1>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ...
import NotFoundPage from './pages/NotFoundPage.vue'

const router = createRouter({
  // ...
  routes: [
    // ...
    {
      name: 'NotFound',
      path: '/:pathMatch(.*)*',
      component: NotFoundPage
    }
  ]
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
├─src/
│  ├─components/
│  │  └─TheHeader.vue
│  ├─routes/
│  │  ├─guards/
│  │  │  ├─guestOnly.ts
│  │  │  ├─requiresAuth.ts
│  │  │  └─index.ts
│  │  ├─layouts/
│  │  │  ├─DefaultLayout.vue
│  │  │  ├─EmptyLayout.vue
│  │  │  └─LayoutProvider.vue
│  │  ├─pages/
│  │  │  ├─AboutPage.vue
│  │  │  ├─HomePage.vue
│  │  │  ├─MovieDetailsPage.vue
│  │  │  ├─MoviesPage.vue
│  │  │  ├─NotFoundPage.vue
│  │  │  └─SignInPage.vue
│  │  └─index.ts
|  ├─App.vue
│  └─main.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

function handleSubmit(event: Event) {
  // `<form>`의 데이터를 가져와 사용하기 쉽게 객체로 변환합니다.
  const formData = new FormData(event.target as HTMLFormElement)
  const { email, password } = Object.fromEntries(formData) as Record<string, string>
  // 로그인 정보가 모두 있으면, 임시로 로그인 처리합니다.
  if (email && password) {
    localStorage.setItem('accessToken', 'abcd1234')
    const redirectTo = (route.query.redirectTo as string) || '/'
    router.push(redirectTo)
  }
}
</script>

<template>
  <div>
    <h1>Sign In page!</h1>
    <form @submit.prevent="handleSubmit">
      <input
        name="email"
        type="email"
        placeholder="Email" />
      <input
        name="password"
        type="password"
        placeholder="Password" />
      <button type="submit">로그인</button>
    </form>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// ...

const router = createRouter({
  // ...
  routes: [
    {
      name: 'SignIn',
      path: '/signin',
      component: SignInPage,
      meta: {
        guestOnly: true
      }
    },
    {
      name: 'Movies',
      path: '/movies',
      component: MoviesPage,
      meta: {
        auth: true
      },
      children: [
        // ...
      ]
    }
    // ...
  ]
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import type { RouteGuard } from '.'

export const requiresAuth: RouteGuard = {
  guard(to) {
    if (to.meta.auth) {
      const token = localStorage.getItem('accessToken')
      // 토큰이 유효한지 확인!
      if (!token) {
        return false
      }
    }
    return true
  },
  redirect: to => ({ path: '/signin', query: { redirectTo: to.fullPath } })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import type { RouteGuard } from '.'

export const guestOnly: RouteGuard = {
  guard(to) {
    if (to.meta.guestOnly) {
      const token = localStorage.getItem('accessToken')
      // 유효 토큰이 있는지 확인!
      if (token) {
        return false
      }
    }
    return true
  },
  redirect: () => '/'
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import type { RouteLocationNormalizedGeneric, RouteLocationRaw } from 'vue-router'
import router from '@/routes'
import { requiresAuth } from './requiresAuth'
import { guestOnly } from './guestOnly'

// 라우터 인터페이스 확장
declare module 'vue-router' {
  interface RouteMeta {
    auth?: boolean
    guestOnly?: boolean
  }
}

router.beforeEach(to => {
  if (!requiresAuth.guard(to)) return requiresAuth.redirect(to)
  if (!guestOnly.guard(to)) return guestOnly.redirect(to)
  return true
})

export interface RouteGuard {
  guard(to: RouteLocationNormalizedGeneric): boolean
  redirect(to: RouteLocationNormalizedGeneric): RouteLocationRaw
}

1
2
3
4
5
6
7
8
import { createApp } from 'vue'
import App from './App.vue'
import router from './routes'
import './routes/guards'

createApp(App)
  .use(router)
  .mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script setup lang="ts">
import { RouterView, useRoute } from 'vue-router'
import Default from './DefaultLayout.vue'
import Empty from './EmptyLayout.vue'

declare module 'vue-router' {
  interface RouteMeta {
    layout?: keyof typeof layouts
  }
}

const layouts = {
  Default,
  Empty
} as const

const route = useRoute()
</script>

<template>
  <Component :is="layouts[route.meta.layout || 'Default']">
    <Transition
      name="fade"
      mode="out-in">
      <RouterView />
    </Transition>
  </Component>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// ...
import HomePage from './pages/HomePage.vue'

const router = createRouter({
  // ...
  routes: [
    {
      path: '/',
      component: HomePage
    },
    {
      path: '/about',
      component: () => import('./pages/AboutPage.vue')
    },
    {
      name: 'Movies',
      path: '/movies',
      component: () => import('./pages/MoviesPage.vue'),
      // ...
    }
    // ...
  ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { ref } from 'vue'
// ...

const router = createRouter({
  // ...
})

// 페이지를 내려받는 동안 참이 되는 상태
export const isPageLoading = ref(false)

router.beforeEach(() => {
  isPageLoading.value = true
})
router.afterEach(() => {
  isPageLoading.value = false
})
// 내려받기에 실패하면 afterEach가 호출되지 않습니다.
router.onError(() => {
  isPageLoading.value = false
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script setup lang="ts">
// ...
import { isPageLoading } from '@/routes'
// ...
</script>

<template>
  <Component :is="layouts[route.meta.layout || 'Default']">
    <div v-if="isPageLoading">로딩 중...</div>
    <Transition
      name="fade"
      mode="out-in">
      <RouterView />
    </Transition>
  </Component>
</template>

<!-- ... -->

1
2
3
4
5
6
7
8
9
10
import { defineConfig } from 'vite'
import VueRouter from 'vue-router/vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    VueRouter(),
    vue()
  ]
})

1
2
3
4
5
6
7
8
9
10
11
{
  "compilerOptions": {
    // ...
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "./typed-router.d.ts"
  ]
}

1
2
3
4
5
6
7
├─src/
│  └─pages/
│     ├─movies/
│     │  └─[movieId].vue
│     ├─about.vue
│     ├─index.vue
│     └─movies.vue

1
2
3
4
5
6
7
8
9
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

1
2
3
4
5
6
7
8
export default defineConfig({
  plugins: [
    VueRouter({
      importMode: filepath => (filepath.endsWith('src/pages/index.vue') ? 'sync' : 'async')
    }),
    vue()
  ]
})

1
2
3
4
5
6
7
<script setup lang="ts">
definePage({
  meta: {
    auth: true
  }
})
</script>

1
2
3
4
5
6
<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute('/movies/[movieId]')
const movieId = route.params.movieId
</script>

1
2
3
4
5
6
7
8
9
10
11
12
<script setup lang="ts">
// ...

definePage({
  name: 'MovieDetails',
  beforeEnter: to => {
    console.log(to.fullPath)
  }
})

// ...
</script>

1
2
3
4
5
6
7
8
9
export default defineConfigWithVueTs(
  // ...
  {
    files: ['src/pages/**/*.vue'],
    rules: {
      'vue/multi-word-component-names': 'off'
    }
  }
)

1
2
3
4
5
{
  languageOptions: {
    globals: { definePage: 'readonly' }
  }
}

1
2
3
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

1
/*  /index.html  200

1
2
3
4
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

1
2
3
4
5
6
7
8
9
10
11
{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}