Nuxt.js | 打开一个新页面作为带有路线的模态窗口

Question

How can I achieve something like #dribble, #behance, old #twitter overlay? When you open a single project or post there you will see a modal with a route without leaving the page.

In simple words modal window with the route.

For example, when I visit example.com/login or example.com/posts/1 the existing page content should remain and modal should come with a route.

I hope I made my point clear.

Thanks

Answer 1

You can manually change your url like this

methods: {
    onOpen() {
        history.pushState({}, 'Login', '/login')
    },

    onClose() {
        history.back()
    }
}

and in your modal component, use onpopstate event handler to close the modal when user hit back button.

mounted() {
  window.onpopstate = this.close
},
beforeDestroy() {
  window.onpopstate = null
},