vue中SPA單頁面應用程式詳解

2022-09-26 18:39:11 字數 696 閱讀 1732

一、spa的概述

spa(single page application)單頁面應用程式,在乙個完成的應用或者站點中,只有乙個完整的html頁面,這個頁面有乙個容器,可以把需要載入的**片段插入到該容器中。

spa的工作原理:

eg: 

①根據位址列中url解析完整的頁面:index.html

載入index.html

②根據位址列中url解析#後的路由位址: start

根據路由位址,去在當前應用的配置中 找該路由位址的配置物件去查詢該路由位址 所對應的模板的頁面位址

發起非同步請求載入該頁面位址

③把請求來的資料載入到指定的容器中

二、通過vuerouter來實現乙個spa的基本步驟

①引入對應的vue-router.js(該檔案我已經上傳到我的檔案中)

②指定乙個盛放**片段的容器

③建立業務所需要的各個元件

④配置路由詞典

每乙個路由位址的配置物件(要載入哪個頁面...)

const myroutes = [

,  ]  const myrouter = new vuerouter()

new vue()

⑤測試在位址列中 輸入對應的不同的路由位址 確認是否能夠載入對應的

}spa練習

}本文標題: vue中spa單頁面應用程式詳解

本文位址:

SPA 單頁面應用程式。

看到這個問題,先說下自己的理解到的程度,再去參考做修正,爭取這一次弄懂搞清楚 自己的理解 單頁面應用程式,解決瀏覽器獲取資料重新整理頁面的尷尬,通過ajax請求獲取資料達到非同步更新檢視的按鈕,原理的實現由兩種,其一,通過hash值的變化,繫結onhashchange的 函式更新檢視,因為hash值...

SPA 單頁面應用 單頁Web應用

正常網頁url的組成,可以請看location 物件 包含有關當前 url 的資訊。例如 如上的 url 由以下部分組成 1 https 規定了頁面採用的協議 2 mp.csdn.net 為頁面所屬的網域名稱 3 postedit index.html為讀取的檔名稱 也可以叫做入口檔案 4 name...

angular 單頁面應用程式

我們都知道angularjs是單一頁面應用程式,那什麼是單一頁面應用程式呢?單一頁面應用程式到底有什麼好處呢?下面我們來看一下 首先我覺得可以把頁面的響應模式分成這樣大概3個階段 1.最傳統的階段 什麼都得重新整理 最傳統的web站點中,客戶端向伺服器傳送請求,伺服器響應之後把生成好的html通過r...