• HTTP 상태 코드

⚠️ 404 Not Found Route

Vue Router에서는 정규식, 와일드 카드 경로(:pathMatch(.*)*)를 활용하여 존재하지 않거나 잘못된 경로를 Error 페이지로 이동시킬 수 있습니다.

• index.js

    {
      path: '/pathMatch(.*)*',
      name: 'NotFont',
      component: NotFoundView,
    },
  

• views/errors/NotFoundView.vue

  <template>
    <div class="text-white text-center p-5">
      <h1>🤷‍♂️ Oops!</h1>
      <h2>Page Not Found</h2>
      <div class="text-secondary">Status: 404 Not Found!</div>
      <div class="mt-5">
        <RouterLink>
          <button class="btn btn-primary">Home</button>
        </RouterLink>
      </div>
    </div>
  </template>
  

<aside> <img src="/icons/checkmark-line_lightgray.svg" alt="/icons/checkmark-line_lightgray.svg" width="40px" />

{{ $route.params.pathMatch }} : 이런 식으로 경로를 ,로 구분되어 배열로 출력됩니다.

</aside>

• (.*) : 특정 문자열 뒤에 정규식 표현

• ()로 감싸게 되면 캡쳐하여 위 처럼 출력 등 가능해짐 ( pathMatch가 없음 )

• (.*)*는 모든 경로를 의미합니다. 위와 같이 중첩 경로(/../..)까지