Vue の SPA シングルページ アプリケーションの例

小云云
リリース: 2018-01-19 13:57:35
オリジナル
2055 人が閲覧しました

この記事では主に Vue の SPA シングルページ アプリケーションの関連情報を詳しく紹介します。興味のある方はぜひ参考にしてください。

1. SPA の概要

SPA (シングル ページ アプリケーション) 完成したアプリケーションまたはサイトには、このページにコード スニペットが挿入される完全な HTML ページが 1 つだけあります。容器。

SPAの仕組み:

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

①アドレスバーのURLに従ってページ全体を解析します:index.html
インデックスを読み込みます。 html

②# 後のルーティング アドレスに従って、アドレス バーの URL を解析します: start
ルーティング アドレスに基づいて、現在のアプリケーションの構成内のルーティング アドレスの構成オブジェクトに移動して、ルーティングアドレスに対応するテンプレート
ページアドレスをロードするリクエストを非同期に開始します

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

2番目、VueRouterを通じてSPAを実装する基本手順

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


<router-view></router-view>
ログイン後にコピー

③ビジネスに必要なさまざまなコンポーネントを作成します
④ルーティング辞書を設定します
各ルーティング アドレスの設定オブジェクト (必須 どのページ読み込む...)


const myRoutes = [
  {path:&#39;/myLogin&#39;,component:TestLogin},
  {path:&#39;/myRegister&#39;,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:&#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>
ログイン後にコピー




 
 
 SPA练习
  
  
 
 
 

{{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>
ログイン後にコピー

関連する推奨事項:

vue2 で単一ページの Web ページ タイトルを設定する方法を簡単に理解します

Vue.js が複数のルーティング領域を持つ単一ページをどのように操作するかに関するケーススタディ

H5 単一ページ ジェスチャー スライディング スクリーン切り替え原理

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!