[영화 검색 사이트] Vue Router 404 Page Not Found

https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route

Dynamic Route Matching with Params | Vue Router

 

 

index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './Home'
import Movie from './Movie'
import About from './About'
import NotFound from './NotFound'

export default createRouter({
  // Hash, History
  // https://google.com/#/search
  history: createWebHashHistory(),
  // pages
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/movie/:id',
      component: Movie
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/:notFound(.*)',
      component: NotFound
    }
  ]
})

 

 

NotFound.vue

<template>
  <div class="not-found">
    <div class="status">
      404
    </div>
    <div class="message">
      Page Not Found!
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @import '~/scss/main';
  
  .not-found {
    line-height: 1.2;
    text-align: center;
    font-family: "Oswald", sans-serif;
    padding: 80px 20px;
    .status {
      font-size: 160px;
      color: $primary;
    }
    .message {
      font-size: 50px;
    }
  }
</style>