logo设计多少钱,短视频seo,有哪些网站做任务有佣金,深圳网站建设服务器vue阻止浏览器刷新#xff0c;达到业务逻辑的实现
有类似的需求#xff0c;页面存在编辑框或者文本输入或者其他#xff0c;当用户进入编辑状态时#xff0c;如果没有点击保存就离开页面#xff0c;需弹窗提示。chrome浏览器手动刷新时如果处于编辑状态也弹出相应的阻止功…vue阻止浏览器刷新达到业务逻辑的实现
有类似的需求页面存在编辑框或者文本输入或者其他当用户进入编辑状态时如果没有点击保存就离开页面需弹窗提示。chrome浏览器手动刷新时如果处于编辑状态也弹出相应的阻止功能出来例如下面的系统级别加载和自定义部分的弹框确认提示。
强刷新
mounted(){let body document.querySelector(body)window.addEventListener(beforeunload,this._beforeunloadHandler)}
_beforeunloadHandler(event) {event.preventDefault();event.returnValue 您在页面编辑了未保存是否确认离开return 您在页面编辑了未保存是否确认离开}有什么不同之处呢
此代码在用户进行F5刷新的时候是百分之百会进行提示的。但界面上浏览器自带的刷新按钮旋转的刷新按钮当页面没有进行更改操作任何操作的时候就不会弹出此提示框会直接刷新只有当界面更改内容任意内容的时候才会出现提示框。
伪刷新
再不强制刷新的情况下vue为单组件渲染模式不存在这里的路由变化导致界面重新加载的情况。所以可以采用路由拦击的方式达到业务的闭环。
组件内的守卫分为三种 beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave ① beforeRouteEnter 进入组件之前 进入该组件之前被调用组件实例还没有被创建不能使用 this关键字
不过你可以通过传一个回调给 next来访问组件实例也就是说可以通过 next 来回调实例化后的组件用next函数的 vm 参数充当 this export default {name: Admin,data(){return{infor:hw}},beforeRouteEnter:(to,from,next){//此时该组件还没被实例化alert(this.infor); //弹出消息框信息为 undefinednext(vm {//此时该组件被实例化了alert(vm.infor); //弹出消息框信息为 hw})}}②beforeRouteLeave 离开组件之后 离开组件之后调用可以调用 this 关键字 export default {name: Admin,beforeRouteLeave(to,from,next){if(confirm(确定离开吗) true){next() //跳转到另一个路由}else{next(false);//不跳转}}}③beforeRouteUpdate 该组件被复用时调用 该组件被复用时调用可以调用 this 关键字 beforeRouteUpdate (to, from, next) {// 在当前路由改变但是该组件被复用时调用// 举例来说对于一个带有动态参数的路径 /foo/:id在 /foo/1 和 /foo/2 之间跳转的时候// 由于会渲染同样的 Foo 组件因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 this}在Ts中如何使用组件内路由守卫
ue typescript 开发环境 组件内无法调用路由钩子beforeRouterEnter等守卫 需要向Component注册hooks
首先一点的是组件内路由守卫生效的位置是由route直接渲染的组件而不是子组件或者子组件的组件。 需要子组件中再加Component的注册hooks。
Component.registerHooks([beforeRouteEnter, beforeRouteLeave, beforeRouteUpdate]);例如
import { Vue, Component } from vue-property-decorator;
import { Divider } from ant-design-vue;
import { RouteConfig } from vue-router;
import { getUserList } from /api/user/user;
//registerHooks.js
// 可以将注册钩子的代码抽取公共代码
Component.registerHooks([beforeRouteEnter,beforeRouteLeave,beforeRouteUpdate
]);Component({components: {ADivider: Divider,},// 用法2// beforeRouteEnter(to, from, next) {// console.log(组件内守卫);// console.log(this); // 进入组件之前未被实例化无法访问this// }
})
export default class NAME extends Vue {// 用法1beforeRouteEnter(to: RouteConfig, from: RouteConfig, next: Function): void {console.log(组件内守卫);console.log(this); // 进入组件之前未被实例化无法直接访问thisnext((vm: object) {console.log(vm);});}
}
