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

Question

我怎样才能实现像#dribble、#behance、旧的#twitter 覆盖这样的东西？当您打开单个项目或在那里发布时，您将看到一个带有路线的模式，而无需离开页面。

简单来说就是带路由的模态窗口。

例如，当我访问example.com/login或example.com/posts/1现有页面内容应保留并且模态应带有路线。

我希望我说清楚了。

谢谢

Answer 1

您可以像这样手动更改您的网址

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

    onClose() {
        history.back()
    }
}

并在模态组件中，onpopstate当用户点击后退按钮时使用事件处理程序关闭模态。

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