Question

因此，当用户首次选择一个类别（来自列表或类似内容）时，我会尝试实现此目标

www.website.com/products/
to
www.website.com/products/category1

获得多个子类别的用户，当用户继续选择其中一个子类别时，我希望URL来自：

www.website.com/products/category1
to
www.website.com/products/category1/subcategory1

有关说明，请参阅this

无论我使用过.pushState，它都适用于我的category1，但是当我按下子类别1-2-2时，它会不断添加内容到URL。在我的第一个事件处理程序中，我做了：

window.history.pushState(null, null, jQuery(this).attr('category'));

这给了我正确的地址即时寻找/ products / category1 / 但是当我尝试做的时候：

window.history.pushState(null, null, jQuery(this).attr('category') + "/" + jQuery(this).attr('subcategory'));

它只会继续向我的网址添加内容，我在这里做错了什么？

Answer 1

问题是您的网址是相对于当前目录，这意味着category/sub-category指向不同的位置，具体取决于您是在查看https://example.com/products/category还是{{ 1}}。

您可以通过运行下面的代码段来了解错误的累积方式：

https://example.com/products/category/sub-category

var url = 'http://example.com/products/'

function parseRelative (url, base) {
  console.log(
    'Relative: ', url,
    '\nBase:\t  ', base,
    '\n    =>    ', url = new URL(url, base).href
  )
  return url
}

for (var i = 0; i < 3; i++) {
  url = parseRelative('category/sub-category', url)
}

修复问题只需将网址更改为路径 - 绝对格式.as-console-wrapper { min-height: 100%; }：

/products/...

$('.example-button').click(modifyUrl)

function modifyUrl() {

  var url = '/products/' + [$(this).attr('data-category'), $(this).attr('data-sub-category')].join('/')

  history.pushState(null, '', url)
  
  console.log(location.href)

}

对于具有多个/的URL，多次使用window.history.pushState

1 个答案: