[Vue Router warn] No match found for location with path ~ 해결하기(Vue3, vue-router4)

문제

path를 "/sign/in" 으로 지정하니까 아래와 같은 에러가 떳다.

// router.ts
{
    path: '/sign/in',
    name: 'signin',
    component: () => {
      return import(
        /* webpackChunkName: "SignInVIew" */ '@/views/SignInView.vue'
      );
    },
  },

// header.vue
<v-btn-group>
    <v-btn class="signup">회원가입</v-btn>
    <v-btn class="signin" to="sign/in" exact>로그인</v-btn>
</v-btn-group>

 

---

 

원인

 

경로를 동적으로 추가하면 beforeEach가 처음 실행될 때 sing/in 경로를 찾을 수 없기 때문에

일치하는 경로가 비어 있어 이 경고가 뜨는것이다.

해결 방법은 router/index.ts 파일에 404 라우트를 등록하는 방법이다.

 

이런 방식으로 beforeEach를 처음 실행할 때 일치하는 경로가 없으면 404 경로로 매칭할 수 있도록 하면 경고가 사라진다.

---

해결 방법

예외처리 Notfound 경로를 추가해주면 경고가 사라진다!

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

  // router.ts
  {
    path: '/sign/in',
    name: 'signin',
    component: () => {
      return import(
        /* webpackChunkName: "SignInVIew" */ '@/views/SignInView.vue'
      );
    },
  },
  { // 추가!!!!!
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => {
      return import(
        /* webpackChunkName: "NotFoundView" */ '@/views/NotFoundView.vue'
      );
    },
  },