A mode,

  • Use the hash (” # “) in the URL
  • Take advantage of the History Interface new method in HTML5

Hash (default) ==>hashHistory

1, hashHistory. Push

Adds the new route to the top of the stack for browser access history

2, hashHistory. Replace

Replace the current route

3, hashchange

 function random () {
        var num = parseInt(Math.random() * 100)
        document.getElementById('num').innerHTML = num
        window.location.hash = "num=" + num
    }
    random();
    window.addEventListener('hashchange'.function (e) {
        var str = e.newURL.split(The '#')[1]
        document.getElementById('num').innerHTML = str.split('=')[1]
    })
Copy the code

Vue -cli3 will let you choose whether to default history) ==> history interface

Is history mainstream? For me, it’s just because Hash is ugly!!

  • History.back() : go to the previous page, equivalent to history.go(-1)
  • History.forward() : go to the next page, equivalent to history.go(1)
  • History.go() : Loads the page from the browser History (session record) by relative position of the current page.

If the parameter is -1, the previous page is displayed; if the parameter is 1, the next page is displayed. When the integer argument is out of bounds, for example, if the current page is the first page, there are no previous pages, and I pass the value -1, then this method has no effect and will not report an error. Calls to the go() method with no arguments or arguments that are not integers also have no effect

Starting with HTML5, the History interface has been further refined: pushState() and replaceState() not only read, but also modify the browser History stack.

1, the history. PushState (state, the title, URL)

Add a history record to the browser, but it will not refresh the current page (will not reload), where state is the object, can be used to carry information, title: currently, there is no use in general or null, URL: that is, to change the page URL, and must be the same source, cannot cross domain;

2, the history. ReplaceState (state, the title, URL)

To change the history of the current browser, replace the record of the page where this code is currently executed with the same parameter as pushState

3. Popstate (called when moving forward or backward)

function random () {
        var num = parseInt(Math.random() * 100)
        document.getElementById('num').innerHTML = num
        window.history.pushState({num: num},' ', num);
    }
    random();
    window.addEventListener('popstate'.function (e) {
        console.log('active')
        document.getElementById('num').innerHTML = e.state.num
    })
Copy the code