While browsing the Vue.js documentation website, I noticed that every time I click on a different documentation guide link (see below) they all seem to have different HTML pages in the URL.
For instance, the 'Installation' has the URL https://v1.vuejs.org/guide/installation.html and 'List Rendering' has the URL https://v1.vuejs.org/guide/list.html. They both seem to have different HTML pages as seen from the URL, but shouldn't there only be 1 HTML page on a SPA website?
Yes, technically there is only 1 HTML page - the index.html. Vue generates so-called single-page applications. Vue has a router that, roughly speaking, simulates subpages by manipulating the URL. The content of www.example.com/about/us is still displayed via the index.html. Under the hood, of course, it's much more complex.
However, other Vue frameworks such as Nuxt can also generate static pages in the build process (not in "realtime") to improve SEO. These in turn are "real" HTML pages.
Early SPAs tended to have a single
index.html file which contained a skeleton HTML document and then populated it (using client-side JS) with content based on the URL.
This tends to render content on the user's screen faster (as the content is just there and doesn't need to be fetched as a second step with JS), is better food for search engines, and works even if the JS fails for some reason.
There are two general approaches for this:
Note that server-side rendering gives you multiple URLs that serve up different HTML documents, while static rendering gives you multiple HTML files.
Different url route doesn't mean different files. Single page application means you can navigate through all the pages without refreshing the website. It just renders different views according to user preference. YouTube is a fine example of single page application.
Index.html in single page apps are generated from index.js in such cases which further get associated with different routes and components. Technically, there is a single html page: index.html