Detailed example of SPA single page application 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 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

② Parse the route 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

<router-view></router-view>

③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 aba7b36f87decd50b18c7e3e3c150106

 
 
 
  

  
 
 
 

    
{{msg}}

    <router-view></router-view>
  

  <script>
    var testLogin = Vue.component("login",{
      template:`
        <p>
          <h1>这是我的登录页面</h1>
        </p>
      `
    })
    var testRegister = Vue.component("register",{
      template:`
        <p>
          <h1>这是我的注册页面</h1>
        </p>
      `
    })
    //配置路由词典
    //对象数组
    const  myRoutes =[
    //当路由地址：地址栏中的那个路径是myLogin访问组件
    //组件是作为标签来用的所以不能直接在component后面使用
    //要用返回值　
　　　　　　//path:&#39;&#39;指定地址栏为空：默认为Login页面
　　　　　　　　{path:&#39;&#39;,component:testLogin},

      {path:&#39;/myLogin&#39;,component:testLogin},
      {path:&#39;/myRegister&#39;,component:testRegister}
    ]

    const myRouter = new VueRouter({
      //myRoutes可以直接用上面的数组替换
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      //或者：
      /*
        router:new VueRouter({
            routes:[
              {path:&#39;/myLogin&#39;,component:testLogin},
      {path:&#39;/myRegister&#39;,component:testRegister}
            ]
        })
      */
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 

 
 
 
  
  
 
 
 

    
{{msg}}
    <router-view></router-view>
  

  <script>
  /*
    需要大家创建一个SPA，这个SPA有3个组件，分别对应的是collect/detail/order
    功能需求：
    在地址栏中路由地址是:
    /myColllect --> 收藏页组件
    /myDetail --> 详情页组件
    /myOrder --> 订单页组件
  */
  /*
    1、引入js文件
    2、创建三个组件,需要返回值
    3、路由词典配置(三小步)const myRoutes、const myRouter、router:myRouter,
    4、指定一个盛放代码片段的容器
          &lt;router-view&gt;&lt;/router-view&gt;
  */
    var testCollect = Vue.component("collect",{
      template:`
        <p>
          <h1>这是收藏页</h1>
        </p>
      `
    })
    var testDetail = Vue.component("detail",{
      template:`
        <p>
          <h1>这是详情页</h1>
        </p>
      `
    })
    var testOrder = Vue.component("order",{
      template:`
        <p>
          <h1>这是订单页</h1>
        </p>
      `
    })
    const myRoutes = [
        {path:"",component:testCollect},
        {path:"/myColllect",component:testCollect},
        {path:"/myDetail",component:testDetail},
        {path:"/myOrder",component:testOrder},
    ]
    const myRouter = new VueRouter({
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 

Related recommendations:

Briefly understand how to set the web title for a single page in vue2

## Analysis of the principle of gesture sliding screen switching of HTML5 single page

php simple page caching implementation code

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