안녕하세요.

오늘은 제가 올해 초 진행했었던 유튜브 뮤직 클론코딩 프로젝트를 리팩토링하면서
개선이 필요한 코드를 발견하여 수정한 경험을 공유해보고자 합니다.

해당 페이지에서는 nested router를 통해 재생목록, 앨범, 노래, 아티스트, 구독 탭을 보여주고 있습니다.
url에 child route를 입력해주지 않은 경우 탭에서 아무것도 보여주지 않아 리다이렉트를 시켜주고자 했었던 것 같습니다.
여기서 문제는 ... 아래처럼 mounted 훅에서 검사를 시켜주고 있었네요 ...

methods: {
  gotoDefault() {
      if (this.$route.path === '/library') this.$router.replace('/library/playlists')
  }
},
mounted() {
  window.scrollTo(0, 0)

  this.gotoDefault()
}

route의 검사를 mounted 훅에서 진행하다보니 가끔씩 화면이 플리커링 되는 현상도 있었습니다.
당시에는 어쩔 수 없는가보다 싶었는데, 지금보니 왜 이렇게 했나 싶네요... 반성해야겠습니다 ......ㅎㅎ

솔루션은 간단합니다.

조금 더 빠르게, 그리고 플리커링을 방지하기 위해서는
Lifecycle상 페이지 컴포넌트의 create보다 빠른 middleware에서 검사를 해주도록 하였습니다.

1. 적용하기

기존의 소스코드를 삭제하고 아래처럼 middleware를 사용하도록 합시다.

middleware({ route, redirect }) {
  if (route.fullPath === '/library') return redirect(`/library/playlists`)
},

middleware를 통해 검사하게 되면, serverside에서 리다이렉션이 작동하게 되어 이슈가 해결된 것을 확인할 수 있었습니다.