• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Multi-page differences

The concept of single-page apps was introduced a few years ago with frameworks like AngularJS, React, and Ember. In the previous introduction, we talked about partial page refresh in page rendering, while single-page application uses the capability of partial page refresh to refresh page content when switching pages, so as to obtain better experience.

SPA with MPA

The differences between SinglePage Web Application (SPA) and MultiPage Application (MPA) are as follows:

The title SPA MPA
composition One main page + multiple page fragments Multiple full pages
Resource sharing (CSS, JS) Shared resources need to be loaded only once Each page needs to load common resources
Url patterns xxx/#/page1 xxx/#/page2 xxx/page1.html xxx/page2.html
Refresh the way Partial page refresh or change A full page refresh
Page jump Shell unchanged, update local page content, easy to realize jump animation Jumping from one page to another cannot be animated
The user experience Fast switching between page fragments, good user experience Page switching requires reloading, which is slow and low in fluency, resulting in poor user experience
The data transfer The same page, global variables and so on are easy to implement Rely on URL parameter transfer, or cookie, localStorage, etc., implementation trouble
Search Engine Optimization (SEO) Implementation is difficult, not conducive to SEO search Simple implementation method
Applicable scenario Applications with high experience requirements Search engine friendly applications are needed

Vue Cli scaffolding configuration

The first step

We create a home page and a secondary page under the public file. The directory structure is as follows

The second step

The main page and the secondary page must have the corresponding main page entry file and the secondary page entry file, directory structure is as follows

The third step

If pages is configured in vue.config.js, it can be interpreted as mapping the configuration of multiple pages.

pages: {
    index: {
        entry: 'src/main.js'.template: 'public/index.html'.filename: 'index.html',},bangban: {
        entry: 'src/banban.js'.template: 'bangban.html'.filename: 'public/bangban.html'}}Copy the code