Detailed explanation of SPA single page application in vue

This time I will bring you a detailed explanation of the SPA single-page application in vue. What are the precautions when using the SPA single-page application in vue. The following is a practical case. Let’s take a look. .

1. Overview of SPA

SPA (single page application) is a single page application. In a completed application or site, there is only one complete HTML page. This page has a container into which the code snippets that need to be loaded can be inserted.

How SPA works:

eg: http://127.0.0.1/index.html#/start

① Parse the complete page according to the url in the address bar: index.html
 Load index.html

②According to the routing address after url parsing # in the address bar: start
 According to the routing address, find the configuration object of the routing address in the current application configuration to find the The page address of the template corresponding to the routing address  Initiate an asynchronous request to load the page address

2. Basic steps to implement a SPA through VueRouter

②Specify a container to hold code snippets

④Configure routing dictionary
Configuration object of each routing address (which page to load...)

const myRoutes = [
  {path:'/myLogin',component:TestLogin},
  {path:'/myRegister',component:TestRegister}
  ]
  const myRouter = new VueRouter({
  routes:myRoutes 
  })
  new Vue({
    router:myRouter 
  })

Enter the corresponding different routing addresses in the address bar to confirm whether the corresponding

 
 
 
  

  
 

 
 

    
{{msg}}

    
  

  
 

 
 
 
  
  
 

 
 

    
{{msg}}
    
  

  
 

mint-ui loadmore Pull-up loading and pull-down refresh conflict handling method

How about the WeChat applet Make the image upload to the server

The above is the detailed content of Detailed explanation of SPA single page application in vue. For more information, please follow other related articles on the PHP Chinese website!