介绍
Vue2刷新和跳转时 用浏览器自带弹窗提示用户
# 提示需求
- 一些特定页面 比如填写一些表单的时候 我们会进行刷新和路由切换的提示 防止客户不小心关掉和刷新页面 导致填写的数据丢失
- 在Vue2 中我们通过
mixin
来实现 这样页面导入即可使用 相当于公共方法 - 页面跳转和刷新 需要用到不同的两个方法
- 页面跳转 我们用Vue Router的
beforeRouteLeave()
方法 他可以直接在Vue的<script>
标签中使用 无需单独在methods
中声明一个方法 - 页面刷新 我们用js的方法
window.onbeforeunload
他是可以帮我们判断用户是否要刷新页面 但是注意 需要在destroyed ()
页面销毁声明周期中 销毁该页面的刷新监控方法 防止污染其他页面
- 页面跳转 我们用Vue Router的
mixin 写一个刷新跳转
- xxxxxxxxxx /** * @type {formName} String * @type {obj} any * @example 表单数据(消除表单验证提示) this.$resetForm('绑定form表单的ref', this.你要重置的数据域) * @example 普通数据 this.$resetForm('', this.你要重置的数据域) */// formName: 表单的ref属性 obj表单的数据域export default function resetForm (formName, obj) { // 清空表单 if (this.$refs[formName]) { this.$refs[formName].resetFields() } // 清空数据域 Object.keys(obj).forEach(key => { obj[key] = '' })}// main.js 入口文件注册// 清空表单import resetForm from '@/utils/resrtForm'Vue.prototype.$resetForm = resetFormjs
/**
* @author 刘凯利
* @function 阻止刷新提示保存
*/
export default {
// 刷新阻止
mounted () {
// 进行刷新提示
window.onbeforeunload = function (e) {
e = e || window.event
// 兼容IE8和Firefox 4之前的版本
if (e) {
e.returnValue = '关闭提示'
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return '关闭提示'
}
},
destroyed () {
// 销毁刷新提示 防止其他页面出现
window.onbeforeunload = null
},
// 切换路由阻止
beforeRouteLeave (to, from, next) {
const answer = window.confirm('系统可能不会保存您所做的更改。')
if (answer) {
next()
} else {
next(false)
}
}
}
在使用的页面 导入mixin并使用
- mixin使用详情看这里
import onbeforeunload from '@/mixin/onbeforeunload'
export default {
mixins: [onbeforeunload],
}