Ausführliche Erläuterung der SPA-Einzelseitenanwendung in Vue

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der SPA-Einzelseitenanwendung in Vue geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung der SPA-Einzelseitenanwendung in Vue? Werfen wir einen Blick darauf.

1. Überblick über SPA

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

So funktioniert SPA:

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

① Analysieren Sie die gesamte Seite anhand der URL in der Adressleiste: index.html
  Laden Sie index.html

②Entsprechend der Routing-Adresse nach # Parsen der URL in der Adressleiste: Starten Sie
  Suchen Sie anhand der Routing-Adresse das Konfigurations--Objekt der Routing-Adresse in der Konfiguration des aktuelle Anwendung, um die Seitenadresse der Vorlage zu finden, die der Routing-Adresse
  entspricht. Initiieren Sie eine asynchrone Anforderung zum Laden der Seitenadresse

③Laden Sie die angeforderten Daten in den angegebenen Container

2. Grundlegende Schritte zur Implementierung eines SPA über VueRouter

①Führen Sie die entsprechende vue-router.js ein (ich habe diese Datei in meine Datei hochgeladen)
②Geben Sie einen Container für die Codefragmente an

<router-view></router-view>

③Erstellen Sie verschiedene für das Unternehmen erforderliche Komponenten
④Konfigurieren Sie das 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:''指定地址栏为空：默认为Login页面
        {path:'',component:testLogin},
      {path:'/myLogin',component:testLogin},
      {path:'/myRegister',component:testRegister}
    ]
    const myRouter = new VueRouter({
      //myRoutes可以直接用上面的数组替换
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      //或者：
      /*
        router:new VueRouter({
            routes:[
              {path:'/myLogin',component:testLogin},
      {path:'/myRegister',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>
 

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall hier gelesen haben Artikel: Für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

mint-ui loadmore Wie man mit Konflikten zwischen Pull-Up-Laden und Pull-Down-Aktualisierung umgeht

Wie wäre es mit dem WeChat-Applet? Ermöglichen Sie das Hochladen von Bildern auf den Server

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der SPA-Einzelseitenanwendung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!