更新Web应用程序中页面过滤器的URL:哈希或历史记录API?

时间:2019-02-17 00:57:07

标签: javascript

我正在开发一个Web应用程序,可以使用JavaScript过滤大量数据。当用户选择过滤器时,我想更新页面的URL以反映所选的过滤器,以便用户可以与其他人共享该URL,并且该人可以加载页面,并且我的应用将应用相同的过滤器。 我不需要浏览器中的后退按钮来循环浏览先前选择的过滤器

我想我有两种方法:

  1. 我可以创建过滤器的表示形式,并通过window.location.hash将其添加到当前页面的片段中。我可以在页面加载时解析它们,以查看是否已设置任何内容。
  2. 我可以将过滤器表示为查询字符串参数,并使用history API处理URL。我会使用replaceState方法。

是否有理由选择一个?再次强调一下,我不关心任何路由或浏览器历史记录操作。我只想为某人提供一种将某些参数放入我的JS代码将解析并用作过滤器的URL中的方法。

1 个答案:

答案 0 :(得分:0)

使用Vue路由器(可能也是状态管理的vuex)应该可以帮助您节省时间。还有一个用于URL编码/解码的小帮助程序库-> qs。

对于您的问题“历史与哈希”:这取决于您的应用程序,托管应用程序的系统(例如,具有自己的url处理的内容管理系统的一部分)以及参数的含义。

只要您留在应用程序中,历史记录模式就会生成外观更好的路径,并具有更多的控制权。但是:由于您的路径段没有标识符,因此排序顺序很重要。

方案:您有一个可以包含三个参数的应用程序:

/ value1 / value2 / value3表示/ value1 / value3 / value2

使用查询字符串,您无需关心排序顺序,因为每个值都有其键: key1 = value1&key2 = value2&key3 = value3与key1 = value1&key3 = value3&key2 = value2相同