[Vue] router-link로 Number타입인 params를 넘겼을 때 새로고침하면 String타입으로 변환되는 문제

작성일 | In

문제상황

BoardList.vue에서 BoardView.vue로 넘길려고 한다.
bid를 Number타입으로 넘겼지만 ‘BoardView’에서 새로고침(F5)를 할 경우 문자 타입으로 변환된다.
만약 bid의 타입을 확인하고 싶다면 console.log(typeof this.bid)로 확인할 수 있다.

  • BoardList.vue(게시물 목록)
1
2
3
<router-link
  :to="{ name: 'BoardView', params: { bid: data.item.bid }}"
></router-link>
  • BoardView.vue(게시물 상세보기)
1
2
3
props: {
  bid: {type: Number}
},
  • 새로고침했을 때 오류 메시지

[Vue warn]: Invalid prop: type check failed for prop “bid”. Expected String with value “42”, got Number with value 42.

문제고민

새로고침하였을 때 타입이 안 바뀌는 방법 중 하나는 query를 사용하는 것이다.
그러나 params로 넘길 때는 url이 /board/view/3으로 bid가 3인 게시물을 확인할 수 있지만 query로 넘길 경우 url이 /board/view?bid=3으로 게시물을 확인해야한다.

나는 url이 /board/view/:bid와 같은 형식으로 나오길 원하기 때문에 bid의 타입을 Number타입으로 바꾸는 생각을 했다.
그렇게 찾다보니 type을 두 가지로 설정할 수 있는 방법을 찾았다!

문제해결

type: [String, Number] 타입을 이렇게 바꾸어주면 String과 Number인 두개의 타입으로 얻을 수 있다.

1
2
3
props: {
  bid: {type: [String, Number]}
},