javascript - 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
},