What does vue spa mean?

In vue, the full name of spa is "single-page application", which means "single-page application" in Chinese. It is an application with only one Web page. It loads a single HTML page and interacts with the application when the user A web application that dynamically updates the page.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

SPA in Vue

SPA (single-page application, single-page application). A web application that loads a single HTML page and dynamically updates that page as the user interacts with the application.

Load the corresponding HTML, JavaScript and CSS when the Web page is initialized. Once the page is loaded, SPA will not reload or jump the page due to user operations; instead, it uses the routing mechanism to implement changes in HTML content, interaction between the UI and the user, and avoid page reloading.

Differences from traditional multi-page programs:

Traditional multi-page programs: Each request to the server returns a complete page

Single Page application: Only the first time the page will be loaded, each subsequent request will only obtain the necessary data. Then, the data obtained by parsing the js in the page will be displayed on the page.

Advantages ：

1 Reduce the request volume, speed up the page response speed, and reduce the pressure on the server

2 Better user experience, allowing users to feel the smoothness of the native app in the web app

Disadvantages:

Because the technology uses ajax, the page is not conducive to SEO, but it can be circumvented through other technologies

(SEO principle: search The engine's spider only recognizes the general hyperlink of href, but does not recognize the JavaScript code. It will crawl in when it encounters a general hyperlink, but will not crawl in when it encounters JavaScript. That is, the search engine cannot catch the content dynamically loaded by AJAX.)

1) Server-side rendering 2) Page staticization (specially prepared for crawlers)

Main technical points:

1 ajax

2 Use of anchor point (window.location.hash #)

3 hashchange event

Implementation ideas:

Monitor anchor value changes Events, request corresponding data according to different anchor values

1 Anchor point (#) was originally used to jump inside the page, locate and display the corresponding content

2 SPA , the anchor point is used as an identifier to request different resources, request data and display content

[Related recommendations: "vue.js Tutorial"]

The above is the detailed content of What does vue spa mean?. For more information, please follow other related articles on the PHP Chinese website!