Router란 Component View를 url에 맞춰 보여주는 도구이다.

이전에 Router를 이용하여 화면을 전환하는 법을 알아봤는데 이번 시간엔 없는 페이지를 접근할 때 대처하는 법에 대해 알아보자.

없는 페이지 접근?

라우터에 다음과 같은 routes가 정의되어 있다고 하자.

routes: [
  {
    path: '/test1'
    component: Test1
  },
  {
    path: '/test2'
    component: Test2
  }
]

위와 같이 /test1, /test2에 접근했을때만 컴포넌트들이 보여진다.

하지만 /test3를 접근한다면?
접근은 되지만 화면엔 아무것도 보이지 않는다.
당연하다. 매칭되는 컴포넌트가 없기 때문이다.

개발한 사람은 당연히 알겠지만(해당 개념을 아는 사람 포함), 일반 사용자는 백지 화면을 보고 당황스러울 것이다.

이러한 모델은 사용자경험에 적합하지 않은 UI라고 할 수 있다.

어떠한 액션을 취했을때는 반드시 그에 상응하는 반응이 있어야 한다.(정상적인 실행이든, 에러든..)

잘못된 url에 접속 했을때는 잘못된 경로로 접속을 했다 라는 등 정보를 화면에 표시해줘야 할것이다.

그 방법에 대해 알아보자.

routes: [
  {
    path: '/test1'
    component: Test1
  },
  {
    path: '/test2'
    component: Test2
  },
  {
    path: '*',
    component: NotFoundPage
  }
]

마지막 route객체에 * 을 경로로 두고 잘못된 접근을 했을때 보여지는 component를 적절히 생성하여 매칭시켜주면 되겠다.

이렇게 되면 설정되지 않은 /test3 경로로 접근했을 때 NotFoundPage 컴포넌트가 화면에 보여질 것이다.

출처 : Vue.js 끝장내기 - 실무에 필요한 모든 것