首頁 > web前端 > js教程 > 主體

vue中SPA單頁應用程式詳解

php中世界最好的语言
發布: 2018-04-14 17:08:21
原創
3778 人瀏覽過

這次帶給大家vue中SPA單頁面應用程式詳解,使用vue中SPA單頁應用程式的注意事項有哪些,以下就是實戰案例,一起來看一下。

一、SPA的概述

# SPA(single page application)單頁面應用程序,在一個完成的應用或網站中,只有一個完整的html頁面,這個頁面有一個容器,可以把需要載入的程式碼片段插入到該容器中。

SPA的工作原理:

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









## ①根據網址列中url解析完整的頁面:index.html
  載入index.html

②根據位址列中url解析#後的###路由位址###:start###  根據路由位址,去在目前應用的設定中找該路由位址的設定###物件###去查找該路由位址所對應的範本的頁面位址###  發起非同步請求載入該頁面位址####### ③把請求來的資料載入到指定的容器中###### ###二、透過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}}

       

    
登入後複製


 
 
 SPA练习
  
  
 
   

    

{{msg}}

       

    
登入後複製
###相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! ######推薦閱讀:#########mint-ui loadmore上拉載入與下拉刷新衝突處理方法###############微信小程式怎樣使圖片上傳至伺服器############

以上是vue中SPA單頁應用程式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!