Uma SPA (Single Page Aplication) é uma aplicação que não recarrega a página durante o seu tempo de vida.
Ou porque a informação cabe somente numa página, ou usando navegação no lado do cliente, a janela do navegador nunca é recarregada.
À medida que o JavaScript foi ficando mais avançado começou a ser possivel via ajax ir buscar dados ao servidor e a outros serviços sem ter de recarregar a página com dados novos no HTML. Assim frameworks como Backbone.js, React, Vue, Angular tornaram essa norma algo muito usado.
Caso a aplicação seja mesmo de uma página só então não precisa de Router, mas nas aplicações maiores pode mesmo ter-se um Router no lado do cliente para simular mudança de páginas e usando o pushState pode mesmo mudar-se o endereço no navegador sem ter de carregar a página.
Um exemplo de SPA (muito simples, baseado num jsFiddle do Eduardo) com Vue.js seria por exemplo:
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>
<script src="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: http://jsfiddle.net/55ca496g/
Neste exemplo há dois componentes que preenchem o corpo da página. Assim dependendo de qual dos componentes estamos a usar via Router temos partes diferentes da aplicação, que parecem duas páginas diferentes mas na verdade é uma SPA.