如何解决在Nuxt JS中导航时如何警告用户未保存的数据例如,使用香草js的ala onbeforeunload?
我正在使用Nuxt.js @ v2.14.4
进行项目。
我尝试在页面和组件内部使用导航保护,但是似乎没有触发。
https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards
我的文件如下:
--| nuxt.config.js
--| package.json
--| pages/
----| applications/
------| _.vue
因此,基本上,当导航到localhost:3000/applications/abcd
之类的URL时,由于我正在使用nuxt的自动路由,因此它将服务于pages/application/_.vue
页面
我尝试如下在pages/application/_.vue
中定义vue组件防护:
<template lang='pug'>
div Hello World
</template>
<script>
export default {
...
beforeRouteLeave (to,from,next) {
console.log('@@@@@@@@@ BEFORE ROUTE LEAVE @@@@@@@@@')
alert('@@@@@@@@@ BEFORE ROUTE LEAVE @@@@@@@@@')
},...
}
</script>
我使用此类链接进行导航
a(:href='"/applications/"+application.code) {{ form.label }}
但是离开页面似乎不会触发此操作。在nuxt中执行此操作的正确方法是什么?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。