What is SPA and what differs from a non SPA page?

A SPA (Single Page Application) is an application that does not refresh the page during its life time .

Or because the information fits only on a page, or by using client-side navigation , the browser window is never recharged.

As JavaScript became more advanced, ajax started to fetch data from the server and other services without having to reload the page with new data in HTML. Thus frameworks such as Backbone.js, React, Vue, and Angular have made this standard widely used.

If the application is one-page only then you do not need a Router, but in larger applications you may even have a Router on the client side to simulate page switching and using pushState you can even change the address without having to load the page.

An example of SPA (very simple, based on a jsFiddle from Eduardo ) with Vue.js would be for example:

const Principal = {
  template: '<h1>Página Principal</h1>'
}
const Secundaria = {
  template: '<h1>Página Secundária</h1>'
}

const router = new VueRouter({
  mode: 'history',
  routes: [{
      path: '/principal',
      component: Principal
    },
    {
      path: '/secundaria',
      component: Secundaria
    }
  ]
})

new Vue({
  router,
  el: '#app'
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script><scriptsrc="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/principal">Pagina principal</router-link>
  <router-link to="/secundaria">Pagina secundária</router-link>
  <router-view></router-view>
</div>

jsFiddle: link

In this example there are two components that fill the body of the page. So depending on which of the components we are using via Router we have different parts of the application, which look like two different pages but it is actually a SPA.