Detailliertes Beispiel einer SPA-Einzelseitenanwendung in Vue

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur SPA-Einzelseitenanwendung im Detail vor. Ich hoffe, dass er für alle hilfreich ist.

1. Überblick über SPA

SPA (Einzelseitenanwendung) ist eine Einzelseitenanwendung. In einer fertigen Anwendung oder Website gibt es nur eine vollständige HTML-Seite. Diese Seite verfügt über einen Container, in den die zu ladenden Codeschnipsel eingefügt werden können.

So funktioniert SPA:

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

①Parsen Sie die gesamte Seite gemäß der URL in der Adressleiste: index.html
Laden Sie index.html

②Parsen Sie die Routing-Adresse nach # gemäß der URL in der Adressleiste: start
Gehen Sie entsprechend der Routenadresse zum Konfigurationsobjekt der Routing-Adresse in der aktuellen Anwendungskonfiguration, um die Seitenadresse der Vorlage zu finden, die der Routing-Adresse entspricht
Initiieren Sie eine asynchrone Anforderung zum Laden der Seitenadresse

③Stellen Sie die Anforderung ein. Laden Sie die eingehenden Daten in den angegebenen Container.

2. Grundlegende Schritte zum Implementieren eines SPA über VueRouter

①Führen Sie das entsprechende ein vue-router.js (Ich habe diese Datei in meine Dateien hochgeladen)
②Geben Sie einen Container für Codeausschnitte an

<router-view></router-view>

③Erstellen Sie, was das Unternehmen benötigt Jede Komponente von
④ Konfigurations-Routing-Wörterbuch
Konfigurationsobjekt jeder Routing-Adresse (welche Seite geladen werden soll...)

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

⑤Test
Geben Sie die entsprechenden unterschiedlichen Routing-Adressen in die Adressleiste ein, um zu bestätigen, ob der entsprechende

 
 
 
  

  
 
 
 

    
{{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>
 

Verwandte Empfehlungen:

Ein einfaches Verständnis, wie man den Webseitentitel für eine einzelne Seite in vue2 festlegt

HTML5-Einzelseite Gesten-Schiebebildschirm Analyse des Schaltprinzips

PHP-Implementierungscode für einfaches Seiten-Caching

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel einer SPA-Einzelseitenanwendung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!