Shulou(Shulou.com)06/01 Report--

This article mainly explains "vue how to achieve the refresh effect after the pop-up window is closed", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "vue how to achieve the refresh effect after the pop-up window is closed"!

Refresh effect after vue pop-up window is closed

The contents of the pop-up window are re-assigned when the list is clicked to enter the details, but the same pop-up window is opened without clicking Save after modification, and the data is what it looked like before it was closed.

Solve

Define a timestamp in the double-click time, each click to pass the value, in the pop-up window watch to receive the timestamp and then assign. Close the page to empty the object.

List page:

This.timestamp=new Date () .getTime ()

Pop-up details page:

Props: {timestamp:Number} watch: {timestamp: {/ / data acquisition for in-depth monitoring}} close or refresh the vue file pop-up prompt box

Add the following code to the vue file:

I added the following code to app.vue

BeforeRouteLeave (to, from, next) {const answer = window.confirm ("data on the current page is not saved, are you sure you want to leave?") ; if (answer) {next ();} else {next (false);}}, mounted () {var _ this=this;_window.onbeforeunload = function (e) {if (_ this.$route.fullPath = ='/ index/uploadImages') {e = e | window.event;// is compatible with IE8 and versions prior to Firefox 4, if (e) {e.returnValue = "close prompt";} / Chrome, Safari, Firefox 4, Opera 12 +, IE 9+return "close prompt";} else {_ window.onbeforeunload = null }};}

Compile and run, refresh / close in the browser, and pop up the following prompt box

Note: the premise that the above method takes effect is that after opening the page, you need to click on the page to get the focus, and then close or refresh it! If it is opened and closed or refreshed without clicking on the page, the method will not be triggered.

.

At this point, I believe that everyone on the "vue how to achieve the pop-up window closed after the refresh effect" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.