(vue路由器)禁用浏览器后退和前进箭头,并显示警告

xiozqbni  于 2022-11-17  发布在  Vue.js
关注(0)|答案(2)|浏览(231)

我正在创建一个多页的小测验,所以我需要用户不能返回到上一页。所以我写了:

const router = createRouter({
  history: createMemoryHistory(),
  routes
});

它是工作的(导航被禁用),但如果用户点击几次,它最终离开页面没有警告。
是否有办法为用户添加警告?
先谢了
此致

vh0rcniy

vh0rcniy1#

您可以使用全局导航保护来检查用户是否正在导航到已识别的路线,并在导航离开之前提示确认。
类似于:

router.beforeEach((to, from) => {
  const route = this.$router.resolve(to)

  if (route.resolved.matched.length) {
    // the route exists, return true to proceed with the navigation
    return true
  }else{
     //the route does not exists, prompt for confirmation
    return confirm("Are you sure you want to leave this site?")
  }
})
6qftjkof

6qftjkof2#

结果证明,解决方案在Vue/VueRouter之外:

window.addEventListener('beforeunload', function (e) {
    e.preventDefault();
    e.returnValue = '';
});

现在,浏览器不会记录特定于Vue的导航,单击“后退”箭头将显示浏览器的内置消息。

相关问题