Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to configure vue multi-pages, the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

The concept of single-page application emerged with the emergence of AngularJS, React, Ember and other frameworks in the past few years. In the previous preface, we talked about the local refresh of the page in the page rendering, while the single-page application uses the local refresh ability of the page to refresh the page content when switching pages, so as to get a better experience.

2. SPA and MPA

The differences between single-page applications (SPA) and multi-page applications (MultiPage Application, MPA) are as follows:

Title SPAMPA consists of a main page + multiple page fragments multiple complete page resource sharing (css,js) common resources only need to be loaded once each page needs to load common resources url mode xxx/#/page1 xxx/#/page2xxx/page1.html xxx/page2.html refresh mode page local refresh or change full page refresh page jump shell unchanged, update local page content It is easy to realize jump animation from one page to another, but it is impossible to achieve fast switching between page segments of jump animation user experience, page switching needs to be reloaded with good user experience, slow and low fluency, poor user experience, data transfer to the same page, global variables, etc., it is easy to rely on url to transfer parameters, or cookie, localStorage, etc., so it is difficult to achieve troublesome search engine optimization (SEO). It is not conducive to the simple implementation of SEO retrieval and the application requiring high experience requires a search engine-friendly application. 3. Vue Cli scaffolding configuration

Step one:

We create a main page and a secondary page under the public file, and the directory structure is as follows

Step 2:

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

Step 3:

Configuring pages in vue.config.js can be understood as a multi-page configuration mapping.

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'}}

On how to do vue multi-page configuration to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.