vue monitor browser returns

Code

Listening return

Mounted () {
     IF (the window.history && window.history.pushState) {
         // inserted into this page history 
        history.pushState ( null , null , document.URL); 
        window.addEventListener ( 'the popstate', the this . goBack, to false ); 
    } 
}, 
Destroyed () { 
    window.removeEventListener ( 'the popstate', the this .goBack, to false ); 
}, 
Methods: { 
    goBack () { 
        // the console.log ( "clicked on the browser's back button "); 
        sessionStorage.clear (); 
        window.history.back (); 
    }, 
}

This page jump because there are routes to other pages, so the routing hook assembly's also clear cache

beforeRouteLeave (to, from , next) {
    sessionStorage.clear();
    next()
},

Disabling return

Mounted () {
     IF (the window.history && window.history.pushState) {
         // inserted into this page history 
        history.pushState ( null , null , document.URL); 
        window.addEventListener ( 'the popstate', the this . goBack, to false ); 
    } 
}, 
Destroyed () { 
    window.removeEventListener ( 'the popstate', the this .goBack, to false ); 
}, 
Methods: { 
    goBack () { 
        // the console.log ( "clicked on the browser's back button "); 
        history.pushState ( null , null, document.URL);
    },
} 

history objects

windowMay be omitted, directly history
1, window.history.back (): back
2, window.history.forward (): Forward
3, window.history.go (num): Specifies the number of forward or backward history

window.history.go (. 1 ) 
proceeds 
window.history.go ( -1 ) 
Back 
window.history.go ( 0 ) 
refresh

4, window.history.pushState (state, title, url)
to store the current history points

state: an object, you can add information about 
title: History of the title 
url: link to the history of the creation of

5, window.history.replaceState (state, title, url)
to replace the current history points

6, popstate
event triggered when an entity change history, history points to listen

7, window.history.state
get state entity in the object history

difference history.go (0) and location.reload () is
a, location.reload ()
The default argument is false, i.e. location.reload (false)

1, location.reload (false):
will use HTTP If-Modified-Since header to detect whether the document has changed on the server
if the document has changed, downloaded again from the server the document
if the document is not changed, the document is loaded from the cache
effect equivalent to click the browser's refresh button (F5)

2, location.reload (true):
bypass the cache, re-download the file from the server
and is equivalent to click your browser's Refresh button while holding down the Shift (Shift + F5)

Two, history.go (0)
directly read cache data, does not obtain data from the server

difference history.go (-1) and history.back () is
a, history.go (-1)
back and refresh the contents of the original pages in the form of lost
two, history.back ()
back, the original pages in the form of content will be retained

 

 

Original: https: //blog.csdn.net/weixin_33953384/article/details/87518720