反应更改 url 参数 - JavaScript

很多应用程序需要在不刷新页面的情况下更新 url 参数。例如，更改搜索结果页面的排序顺序、过滤器选项等。这可以通过 JavaScript 来实现。在本文中，我们将学习如何使用 JavaScript 监听 url 参数更改，并在参数更改时更新页面。

监听 url 参数更改

要监听 url 参数更改，我们可以使用 Window 对象的 onpopstate 事件。该事件在当前历史记录条目更改时触发，可以捕获 url 参数更改的事件。

window.addEventListener('popstate', function(event) {
  console.log('url 参数已更改');
});

获取 url 参数

一旦 url 参数更改，我们需要获取新的 url 参数，以便更改页面的内容。我们可以使用 JavaScript 的 URLSearchParams 接口来获取 url 参数。该接口提供了许多有用的方法来获取、添加、删除和迭代 url 参数。

const params = new URLSearchParams(window.location.search);

const sort = params.get('sort');
const filter = params.get('filter');

console.log(sort);   // 输出排序顺序参数
console.log(filter); // 输出过滤器参数

更新 url 参数

要更新 url 参数，我们可以使用 history.pushState 方法。该方法将新的状态添加到浏览器历史记录中，并更新 url 参数。

const newSort = 'date-desc';
const newFilter = 'all';

const url = new URL(window.location);
url.searchParams.set('sort', newSort);
url.searchParams.set('filter', newFilter);

history.pushState({path: url.href}, '', url.href);

完整代码示例

window.addEventListener('popstate', function(event) {
  console.log('url 参数已更改');

  const params = new URLSearchParams(window.location.search);
  const sort = params.get('sort');
  const filter = params.get('filter');

  console.log(sort);
  console.log(filter);
});

const newSort = 'date-desc';
const newFilter = 'all';

const url = new URL(window.location);
url.searchParams.set('sort', newSort);
url.searchParams.set('filter', newFilter);

history.pushState({path: url.href}, '', url.href);

现在，我们已经知道了如何使用 JavaScript 监听和更新 url 参数。这是一个很有用的技术，可以使我们在不刷新页面的情况下更新页面内容。