nuxt.js 에서 트위터나 인스타그램처럼 라우팅을 하면서 그 자리에서 Modal 표시되는 기능을 작업해야 하는 이슈가 있었다. 이 기능을 작업하려면 다음과 같은 조건이 필요했다.
- 링크 요소를 클릭하여 라우팅한다.
- 라우팅을 하면 페이지 렌더링을 하지 않고, Modal 이 표시되어야 한다.
기본적으로 nuxt.js 는 $router에서 페이지 렌더링을 하지 않고 다른 액션을 취할 수 있는 메소드가 제공되어 있지 않기 때문에 수동으로 작업을 해야 했다.
vue-html
<button @click="login">login</button>
<modal v-if="$route.query.page === 'login'">
<slot />
</modal>methods.login()
this.$router.push({ query: { page: 'login' } }, (route) => {
if (route.query.page && !this.$isServer) {
setTimeout(function() {
window.history.replaceState({} , null, `/${route.query.page}`)
}, 1)
}
})위 기능은 로그인을 하면 로그인 페이지로 이동하지 않고 Modal 띄우도록 하고, 브라우저 주소창에서 Modal 경로가 변경된다. 이 상태에서 다시 새로고침하면 Modal 이 다시 열린다.
이 솔루션은 대안 솔루션이지 완벽한 해결책이 아니다. vue-router 에서 페이지를 렌더링하지 않고 window.history 를 조작할 수 있는 기능 추가가 이루어져야 한다고 본다.