我是 Web 開發新手，在 HTML/CSS 和一些 JavaScript 方面的經驗很少。我最近開始研究前端框架 Vue.js，對單頁應用程式的概念感到困惑。
在瀏覽 Vue.js 檔案網站時，我注意到每次單擊不同的檔案指南鏈接（見下文）時，它們的 URL 中似乎都有不同的 HTML 頁面。
例如，“安裝”的 URL 為https://v1.vuejs.org/guide/installation.html，“串列渲染”的 URL 為https://v1.vuejs.org/guide/list.html。從 URL 上看，它們似乎都有不同的 HTML 頁面，但 SPA 網站上不應該只有 1 個 HTML 頁面嗎？
https://v1.vuejs.org/guide/installation.html
https://v1.vuejs.org/guide/list.html
uj5u.com熱心網友回復：
是的，從技術上講，只有 1 個 HTML 頁面 - index.html。Vue 生成所謂的單頁應用程式。Vue 有一個路由器，粗略地說，它通過操縱 URL 來模擬子頁面。www.example.com/about/us的內容仍然通過 index.html 顯示。當然，在引擎蓋下，它要復雜得多。
但是，其他 Vue 框架（例如 Nuxt）也可以在構建程序中（不是“實時”）生成靜態頁面以改善 SEO。這些又是“真正的”HTML 頁面。
uj5u.com熱心網友回復：
早期的 SPA 往往只有一個index.html檔案，其中包含一個框架 HTML 檔案，然后使用基于 URL 的內容填充它（使用客戶端 JS）。
現代方法更喜歡讓每個不同的 URL 提供一個有用的HTML 檔案，然后在用戶瀏覽應用程式時使用 JavaScript 來更改它。
這往往會更快地在用戶的螢屏上呈現內容（因為內容就在那里并且不需要作為 JS 的第二步獲取），對于搜索引擎來說是更好的食物，并且即使JS 由于某種原因失敗也可以作業.
有兩種通用方法：
- 服務器端渲染（服務器端代碼生成 HTML，通常使用與在瀏覽器中運行的代碼相同的代碼）。這種方法對于經常更新的內容（例如使用 CMS）最為有用。
- 靜態渲染（其中 HTML 檔案在應用程式部署之前的構建時生成。這種方法對于部署到不支持服務器端編程的服務器（例如 Amazon S3 或 Github Pages）非常有用，因此對預算有利。
Nuxt（使用 Vue）和Next.js & Gatsby（使用 React）都支持這兩種方法。
請注意，服務器端呈現為您提供了提供不同 HTML 檔案的多個 URL，而靜態呈現為您提供了多個 HTML檔案。
uj5u.com熱心網友回復：
不同的 url 路由并不意味著不同的檔案。單頁應用程式意味著您無需重繪 網站即可瀏覽所有頁面。它只是根據用戶偏好呈現不同的視圖。YouTube 是單頁應用程式的一個很好的例子。
在這種情況下，單頁應用程式中的 index.html 是從 index.js 生成的，它們進一步與不同的路由和組件相關聯。從技術上講，只有一個 html 頁面：index.html
uj5u.com熱心網友回復：
從技術上講，SPA 并不復雜，實際上是一個非常簡單的概念。Javascript 接管了 DOM 的某個部分的呈現以及瀏覽器歷史記錄的操作和 url 的修改。這樣最終用戶就會感覺到他總是像往常一樣加載新的 HTML 頁面。但事實并非如此，因為從技術上講，用戶只在一個 HTML 頁面上。在大多數情況下 index.html。
當然，對于像 VueJs 或 AngularJS 這樣的框架，在后臺還有很多事情要做。所以這也是關于webcomponents的概念。元素的可重用性等
下面是一個簡短的 js 示例來簡要介紹簡單的概念。選擇 HTML 中的特定區域。然后在每個操作中由 javascript 重新注入。
const app = document.querySelector('div');
const as = document.querySelectorAll('a');
as.forEach(a => {
a.addEventListener('click', (e) => {
app.innerHTML = a.innerHTML
})
})div {
height: 100vh;
text-align: center;
font-size: 50px;
margin-top: 15%;
}<a href="#index">INDEX</a>
<a href="#contact">Contact</a>
<div>
INDEX
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/457855.html
標籤：javascript html Vue.js