使用單個 URL 創建多頁面設計

Question

我的目標是在一個頁面中創建多個屏幕。根據操作，用戶將能夠從一個屏幕導航到另一個屏幕。我分享了下面的圖片

當用戶點擊任何類別時，它將導航到第二個屏幕。

單擊返回時，它將再次返回第一個屏幕，而 URL 沒有變化。我嘗試創建全頁模式，但無法實現這種功能。我不確定是否應該將其作為具有多個屏幕的模式來完成。

請建議我任何可以實現這一目標的方法。

Answer 1

您可能要指的是創建SPA或單頁應用程序。 可以通過“ Vanilla” JavaScript或通過許多JavaScript庫或框架之一來實現。

Reactjs，Angular和Vuejs可能是最常見的。

如果您要使用Reactjs，則可以使用所謂的React Router。 React Router可以很輕松地完成您想做的事情。 使用Vanilla JavaScript進行此操作需要大量工作，否則將非常難看。

但是您確實問過，所以一種方法是使用JavaScript加載iFrame或display: none頂級父元素display: none display:... ，然后再display:...

另外，如果您考慮的是一些不太hacky的東西，但沒有React或同類產品那么復雜的東西，那么請查看此鏈接以獲取相關文章。 也許這是您希望的前進之路。

https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng

Answer 2

為了幫助像我這樣的新手，您可以使用普通 Javascript 中的單個 URL 制作單頁應用程序或 SPA，或根據用戶操作更新的動態頁面。 您不必使用框架。

你需要了解3個概念：

服務器看不到 URL 中的 #

你需要告訴你的代碼你想顯示什么屏幕。 通常你會有 URL.com/page-you-are-on 並單擊 go 的鏈接到 URL.com/page-you

但是，在單頁應用程序中，您不會 go 到不同的 URL。 那么它是怎樣工作的？ 您使用片段標識符或井號符號。 #

服務器無法識別 URL 中的 #。 所以 URL.com/page#page1 和 URL.com/page#page2 到服務器是完全相同的URL.com

因此，您可以在單頁應用程序中使用 URL 向服務器指示您想要的頁面。

路由器可以根據 #URL 片段決定顯示什么

因此，您的頁面在 URL.com/page#page-you-want 加載。 您需要檢查 URL 並讓零件超過 #。 您檢查 URL，並將其拆分為 #。 這意味着你會得到page-you-want 。 然后，您的代碼使用它來決定要顯示的內容。 執行此操作的 function 或文件通常稱為路由器，因為它路由到要顯示的文件或 function。

一旦你知道要顯示什么，動態更新 DOM

這就是魔法發生的地方。 您的網站查看 URL，獲取所有超過 # 的內容，將其發送到決定顯示內容的 function。 您現在需要顯示它。

DOM 有很多函數和方法可以幫助它更新和創建各種東西。 它可以像這樣簡單：

function displayPageAbout() {
  // the router calls this if the URL is URL.com/page#about

  let pageSection = document.getElementById('pageSection') //this is where the page will be displayed

  //create the div and give it content
  let page = document.createElement('div');
  page.textContent = 'This is the About Page'

  //add the div to the spot on the page where the content should go
  pageSection.appendChild(page);
}

基本上就是這樣。

如果發現這兩個示例和教程有助於理解它是什么以及它是如何工作的。

https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/

https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng

祝你好運！