nuxt.js > twitter + instagram style router modal

nuxt.js 에서 트위터나 인스타그램처럼 라우팅을 하면서 그 자리에서 Modal 표시되는 기능을 작업해야 하는 이슈가 있었다. 이 기능을 작업하려면 다음과 같은 조건이 필요했다.

1. 링크 요소를 클릭하여 라우팅한다.
2. 라우팅을 하면 페이지 렌더링을 하지 않고, 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 를 조작할 수 있는 기능 추가가 이루어져야 한다고 본다.