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

Question

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

我想做的很简单：

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

2）当页面被预订到收藏夹时，或从页面需要加载的某个地方作为链接单击时，文本字段值必须为“zyx”。此外，UI 需要显示zyx.

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

Answer 1

因此，您需要的方法是监听 url 中的哈希更改，并基于此获取当前页面并将其呈现在 cointainer 中。像这样的东西：

<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>