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を導入します（このファイルを私のファイルにアップロードしました）
②コードスニペットを保持するコンテナを指定します

<router-view></router-view>

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

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

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

 
 
 
  

  
 
 
 

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

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

推奨読書:

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

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

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