如何通过仅使用 jQuery 构建的单页应用程序实现路由答案

【问题标题】：How to implement routing with a single page application build solely using jQuery如何通过仅使用 jQuery 构建的单页应用程序实现路由
【发布时间】：2017-05-16 12:02:00
【问题描述】：

现在，当用户在文本字段中输入一个单词并点击搜索时，表单使用$.get() 提交。从服务器获取数据（JSON），然后更新 UI。

我想做的很简单：

1) 当表单提交时，浏览器的 URL 需要更新（比如search/zyx，zyx 是用户正在搜索的内容）。

2) 当页面被预订到收藏夹中，或从页面需要加载的某个位置单击链接时，文本字段值必须为“zyx”。 UI 还需要显示zyx 的搜索结果。

这对我的应用很重要，因为我将使用 Google Analytics。所以需要 URL 来反映行为。加上其他问题，如后退按钮历史记录。这是否可能仅使用 jQuery 或基于 jQuery 构建的一些极轻的库。我到处搜索，发现的所有解决方案都是使用 MVC 框架。或者另一种解决方案是使用像this one 这样的模板框架。但是我的应用对于这些解决方案来说太简单了。

【问题讨论】：

考虑使用AngularJS/ ReactJS等框架
这肯定会解决问题，但我必须学习那些框架，而不是我不想学习。但我正在寻找一种使用我目前技能的简单方法:)。另外，我的应用程序非常简单，以至于在我将用来学习它们然后编写我的应用程序的时间里，使用 SPA 框架是一种过度杀伤力。
除非那是唯一的方法，否则无论如何我都必须这样做。只是懒惰，大声笑！
Plus my app is so simple that using an SPA framework 我不这么认为。您可以使用 AngularJS 编写小型应用程序（我对其余部分不太熟悉），这比使用 jQuery/Vanila 编写要容易得多，因为您应该注意一些事情（路由、pushState、SPA 上的分析等）。 )。如果你想成为开发者什么的，你不能偷懒；）

标签： javascript jquery google-analytics single-page-application

【解决方案1】：

因此，您需要的方法是监听 url 中的哈希变化，并在此基础上获取当前页面并将其呈现在硬币容器中。像这样的：

<a href="#page2">Go to Page 2</a>
<div class="page-container"></div>
<script>
$(window).on('hashchange',function(){ 
  var page = window.location.hash;
  $.get('pages/'+page+'.html', function(pageContent){
     $('.page-container').html(pageContent);
  })   
});
</script>

【讨论】：

【解决方案2】：

谢谢大家。所以我最终使用了 @Tulio Faria 的答案和 @Gabriele Mantovani 之间的组合。

为了从 url 中获取搜索关键字，我使用了window.location.hash
更新使用的网址history.pushState({id: 'query'}, '', 'some_url_string');
如果单击浏览器的后退或前进按钮，则使用$(window).on('hashchange',function(){...}) 加载当前搜索关键字的页面

【讨论】：

【解决方案3】：

如果我了解您希望在完成某些操作后更改用户的 URL。还有一个关于它的其他主题HERE，他们使用

window.location.replace(url)

希望对你有帮助:)

【讨论】：

感谢您的建议 @llphrin 但window.location.replace(url) 将导致页面刷新，这违背了应用程序作为单页应用程序的全部目的
这将重新加载页面