Examples of SPA single-page applications in Vue

This article mainly introduces the relevant information of SPA single-page application in vue in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

1. Overview of SPA

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

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

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

③Put the request Load the incoming data into the specified container

2. Basic steps to implement a SPA through VueRouter

①Introduce the corresponding vue-router.js (I have uploaded this file to my files)
②Specify a container to hold the code snippets

③Create each item needed for the business Component
④Configuration 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 　　})

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

         
         
         

          

           
          
         
         

          

           
          
         
{{msg}}
         

         
         

          

           
          
         
         

          

           
          
         
{{msg}}

Related recommendations:

Brief understanding of how to set the webpage title on a single page in vue2

An example analysis of how Vue.js operates a single page with multiple routing areas

H5 single page gesture sliding screen switching principle

The above is the detailed content of Examples of SPA single-page applications in Vue. For more information, please follow other related articles on the PHP Chinese website!