Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Single Page Applications Chapter 15

How it works...

When you use a URL that contains the hash symbol in the browser, the browser will send a

request for the URL without the suffix after the hash, that is, when you have an event inside

a page that goes to the same page but with a different hash suffix:

http://example.com#/page1 on http://example.com#/page2

The browser will not reload the page; this is why vue-router can modify the content of the

page when the user clicks on a link that only modifies the hash, without the page being
reloaded.

When you change the mode from hash to history, vue-router will drop the hash notation

and will leverage the history.pushState() function.

This function adds another virtual page and changes the URL to something else:

http://example.com/page1 =pushState=> http://example.com/page2

The browser will not send a GET request to look for page2 though; in fact, it won't do

anything.

When you press the back button, the browser reverts the URL and vue-router receives an
event. It will then read the URL (which is now page1) and match the associated route.

The role of our compact history server is to redirect every GET request to the
index.html page. This is why when we try to go to http://localhost:8080/fashion

directly, we don't get a 404 error.