この記事では主に 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:'/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>
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、指定一个盛放代码片段的容器 <router-view></router-view> */ 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 サイトの他の関連記事を参照してください。