Detailed description of SPA single page application in vue, vuespa

Source: Internet
Author: User

Detailed description of SPA single page application in vue, vuespa

I. SPA Overview

SPA (single page application) single page application, in a completed application or site, there is only one complete html page, this page has a container, you can insert the code snippet to the container.

How SPA works:

Eg: http: // #/start

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

② According to the url resolved # in the address bar, the route address is start.
Based on the route address, go to the configuration object of the route address in the current application configuration to find the page address of the template corresponding to the route address
Initiate an asynchronous request to load the page address

③ Load the requested data to the specified container

Ii. basic steps for implementing a SPA through VueRouter

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


③ Components required for business creation
④ Configure the routing dictionary
Configuration object of each route 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 different routing addresses in the address bar to confirm whether the corresponding <! Doctype html>

<! Doctype html> 

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.