Question

所以我有一个Vue应用。当某些值的查询进入URL栏时，组件将启动并显示内容，但是当查询被删除时，组件也将显示内容。

每次我按下“后退”按钮，它都会删除查询（预期行为）。因此，我想通过询问用户是否确定要离开，来阻止浏览器删除查询字符串（或在应用查询字符串之前返回），如果是，则返回正常行为，如果否，则不返回并继续使用当前版本。

我尝试了以下方法：

window.onbeforeunload
window.onpopstate
window.onhashchanged

在删除查询后，我还尝试添加回查询，但这会刷新页面。

但是所有这些都不适用于此特定问题。这是我所谓的组件的方式：

<exampleComponent v-if="$route.query.exampleQuery"></exampleComponent>

这是我将查询参数添加到URL的方法：

handle.$router.push('?exampleQuery=' + _id);

修改

我现在也尝试过导航卫士。但问题是，添加查询参数时，这不是路由更改，因此当按下浏览器的后退按钮时，不会在RouteLeave / beforeRouteUpdate之前触发。我在组件和父项上添加了内容，但仅添加了以下内容：

beforeRouteUpdate (to, from, next) {
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
    if (answer) {
      next()
    } else {
      next(false)
    }
},

我的网址：

http://www.example.com/library?id=huf2i783fh8

然后<ResourceView v-if="$route.query.res"></ResourceView>将启动组件。当用户在浏览器上按回时，我的网址更改为：

http://www.example.com/library

然后它关闭/停止该组件，但不应这样做，它需要询问are you sure?然后确认更改，而不是取消。

Vue-禁用浏览器后退按钮清除URL查询

0 个答案: