Vue Router

Vue Router allows you to map different states of your SPA to different URLs, giving you virtual pages. For example,mydomain.com/might be the front page of a blog and have a component hierarchy like this:

<p id="app">
  <my-header></my-header>
  <blog-summaries></blog-summaries>
  <my-footer></my-footer>
</p>

Whereasmydomain.com/post/1might be an inpidual post from the blog and look like this:

<p id="app">
  <my-header></my-header>
  <blog-post post-id="id">
  <my-footer></my-footer>
</p>

Changing from one page to the other doesn't require areloadof the page, just swapping the middle component to reflect the state of the URL, which is exactly what Vue Router does.