vue阻止浏览器刷新,达到业务逻辑的实现,在Ts+vue中使用组件内路由守卫

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);});}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/118457.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html- a标签包裹img标签, 点击图片无法跳转问题记录及解决方法

html- a标签包裹img标签, 点击图片无法跳转问题记录及解决方法 首先明确我们的目标, 就是a标签包裹的内容, 都能点击后以后直接跳转 可以通过更改html结构和css解决: <div v-for"(item, index) in newsData" :key"index" class"flexcol">&…

13.4 DirectX内部劫持绘制

相对于外部绘图技术的不稳定性&#xff0c;内部绘制则显得更加流程与稳定&#xff0c;在Dx9环境中&#xff0c;函数EndScene是在绘制3D场景后&#xff0c;用于完成将最终的图像渲染到屏幕的一系列操作的函数。它会将缓冲区中的图像清空&#xff0c;设置视口和其他渲染状态&…

was下log4j设置日志不输出问题

was下log4j设置日志不输出问题 WAS 也是用的 commons-logging 日志框架 commons-logging 确定 LogFactory 实现的顺序是 从应用的 META-INF/services/org.apache.commons.logging.LogFactory 中获得 LogFactory 实现从系统环境中获得 org.apache.commons.logging.LogFactory…

clip-path图片裁剪

CSS clip-path 属性 属性定义及使用说明 clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示&#xff0c;区域外的隐藏。可以指定一些特定形状。 CSS3 剪贴路径&#xff08;Clip-path&#xff09;在线生成器 | 踏得网 语法&#xff1a;clip: clip-source|basi…

《 汇编语言的系统学习》一、编程语言、机器语言与汇编语言

目录 《 汇编语言的系统学习》1、编程语言1.1 语言1.2 程序 2 编程语言分类2.1 机器语言2.2 汇编语言2.3 高级程序语言2.3.1 编译型2.3.1 解释型 《 汇编语言的系统学习》 1、编程语言 1.1 语言 定义&#xff1a;一种系统的&#xff0c;人与人之间通过声音、符号等进行交流的…

2023/10/25

如果你越来越冷漠 你以为你成长了 但其实没有 长大应该是变得温柔 对全世界都温柔

CUDA学习笔记(十五)Stream and Event

Stream 一般来说&#xff0c;cuda c并行性表现在下面两个层面上&#xff1a; Kernel levelGrid level 到目前为止&#xff0c;我们讨论的一直是kernel level的&#xff0c;也就是一个kernel或者一个task由许多thread并行的执行在GPU上。Stream的概念是相对于后者来说的&…

JavaScript对象与原型

目录 对象的创建 原型与原型链 原型继承 总结 在JavaScript中&#xff0c;对象是非常重要的概念之一。它们允许我们以一种结构化的方式存储和组织数据&#xff0c;并提供了一种方便的方式来操作和访问这些数据。而对象的行为和属性则通过原型来定义。 对象的创建 在JavaS…

华为OD 走方格的方案数(100分)【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应往年部分考题以及新出的题目。 我将持续更新最新题目 我精选了一部分题目免费分享给大家,可前往夸克网盘转存,请点击以下链接进入: 我用夸克网盘分享了「华为OD题库J…

Linux环境下Redis 集群部署

Linux环境下Redis 集群部署 1.单机Redis部署2.Redis 集群配置2.1 创建redis集群安装目录2.2 将redis单机部署目录下的redis.confi文件复制到每个目录下2.3 修改每个文件夹下的redis.conf2.4 修改完六个配置内容后开始启动2.5 启动完后查看进程2.6 建集群 1.单机Redis部署 Linu…

解决:vscode和jupyter远程连接无法创建、删除文件的问题(permission denied)

目录 问题&#xff1a;vscode和jupyter远程连接服务器无法创建、删除文件的问题原因&#xff1a;代码文件的权限不够解决方法&#xff1a;1.ls -l查看目录所在组&#xff0c;权限2.chown修改拥有者和所在组 问题&#xff1a;vscode和jupyter远程连接服务器无法创建、删除文件的…

linux 系统查询redis中指定key值(命令)

文章目录 Linux 系统中查询redis指定key值进入到redis目录下授权当前用户查询指定key值 Linux 系统中查询redis指定key值 进入到redis目录下 登上服务器之后直接输入 redis-cli 进入到127.0.0.1:6379>下 授权当前用户 在127.0.0.1:6379>下&#xff0c;输入如下指令 auth…

【计算机网络】文件传输协议FTP和SFTP

1. 介绍 SFTP&#xff08;SSH文件传输协议&#xff09;和FTP&#xff08;文件传输协议&#xff09;都是用于在计算机之间传输文件的网络协议。FTP和SFTP都位于OSI模型中的应用层。这两种协议用于文件传输和管理&#xff0c;是应用层协议&#xff0c;因此它们工作在OSI模型的最…

vueDay04——v-if else show

一、v-if的使用 我们可以像c语言一样去使用v-if结构 比如单用v-if&#xff0c;连用v-if v-else&#xff0c;或者是v-if v-else-if v-else 注意&#xff1a; 1.v-if v-else-if需要绑定值,而v-else不需要绑定值 2.if结构可以用在不同的标签类型之间 <div v-if"fir…

[Unity]给场景中的3D字体TextMesh增加描边方案一

取你的文本对象&#xff0c;简单地添加以下脚本: using UnityEngine; using System.Collections; using UnityEngine.UI;public class TextOutline : MonoBehaviour {public float pixelSize 1;public Color outlineColor Color.black;public bool resolutionDependant fal…

整理指定文件夹下的所有文件,以类树状图显示并生成对应超链接

最近在整理家里学习资料的时候&#xff0c;由于年代久远&#xff0c;找不到我想要找的文件&#xff0c;windows文件搜索速度感觉太慢。于是想要生成一份类似文件索引的东西来显示所有资料&#xff0c;让我可以快速的找到需要的资料路径 直接上代码 import os import datetim…

【LeetCode】每日一题最后一个单词的长度投票法求解多数元素异或操作符巧解只出现一次的数字整数反转

个人主页直达&#xff1a;小白不是程序媛 LeetCode系列专栏&#xff1a;LeetCode刷题掉发记 目录 LeetCode 58.最后一个单词的长度 LeetCode169.多数元素 LeetCode 136.出现一次的数字 LeetCode 7.整数反转 LeetCode 58.最后一个单词的长度 难度&#xff1a;简单 OJ链接…

软件兼容性测试对软件产品起到什么作用?CMA、CNAS软件测评中心分享

软件兼容性测试是指检查软件之间能否正确地进行交互和共享信息。随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求&#xff0c;测试软件之间能否协作变得越来越重要。软件兼容性测试工作的目标是保证软件按照用户期望的方式进行交互。 1、…

各品牌PLC存储器寻址的规则

在PLC编程时&#xff0c;字节或多字节的变量一般支持绝对地址寻址&#xff08;比如&#xff0c;IW0、MD4等&#xff09;。要想正确寻址&#xff0c;则必须要搞清楚寻址的规则。目前常见的规则有两种&#xff1a;字节寻址和字寻址。下图清晰地表达了两种规则的编号情况&#xff…

React介绍

React介绍 学习目标&#xff1a;了解React是什么以及它的特点 React是什么 React是一个来自FaceBook的专注于构建用户界面的javascript库&#xff0c;与Vue和Angular并称为前端三大框架&#xff0c;目前是世界范围内最流行的js前端框架   React英文文档&#xff08;https:/…