vue の SPA シングルページ アプリケーションの詳細な説明

今回は、vue の SPA シングルページ アプリケーションについて詳しく説明します。vue で SPA シングルページ アプリケーションを使用する際の 注意事項 について、実際のケースを見てみましょう。

1. SPAの概要

SPA (シングル ページ アプリケーション) は、完成したアプリケーションまたはサイト内に、ロードする必要のあるコード スニペットを挿入できるコンテナーを含む完全な HTML ページが 1 つだけあります。

SPAの仕組み:

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

①アドレスバーのURLに従ってページ全体を解析：index.html
index.html

をロード ② # アドレスバーのURLを解析した後のルーティングアドレスに従って: start
ルーティングアドレスに従って、現在のアプリケーションの設定でルーティングアドレスの設定オブジェクトを見つけて、テンプレートのページアドレスを見つけますルーティングアドレスに対応します
ページアドレスをロードするための非同期リクエストを開始します

③リクエストされたデータを指定したコンテナにロードします

2. VueRouter を介して SPA を実装するための基本手順

①対応するvue-router.jsを導入します（このファイルを私のファイルにアップロードしました）
②コードスニペットを保持するコンテナを指定します

③業務に必要な各種コンポーネントを作成
④ルーティング辞書を設定
各ルーティングアドレスの設定オブジェクト(どのページを読み込むか…)

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

⑤テスト
対応するさまざまなルーティング アドレスをアドレス バーに入力して、対応する かどうかを確認します

 
 
 
  

  
 

 
 

    
{{msg}}

    
  

  
 

 
 
 
  
  
 

 
 

    
{{msg}}
    
  

  
 

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、次の点に注意してください。その他の関連トピックについては、php 中国語 Web サイトの記事をご覧ください。

推奨読書:

mint-uiloadmore プルアップの読み込みとプルダウンの更新の間の競合を処理する方法

WeChat アプレットがサーバーに写真をアップロードする方法

以上がvue の SPA シングルページ アプリケーションの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。