javascript - 每次点击事件期间的 URL 覆盖

Question

我已尝试使用 history.pushState 函数在链接点击时更改地址栏中的 URL...

一切顺利。

但它并没有按照我的意愿每次都显示不同的 URL，而是开始覆盖。

这是我的代码

$(document).ready(function() {
  $('#followers').click(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    data = 'page1';
    url = 'followers/';
    history.pushState(data, null, url);
    document.title = 'Followers | <?php echo VISIT_FIRSTNAME;?> <?php echo VISIT_LASTNAME;?> (@<?php echo VISIT_USERNAME; ?>) | <?php echo SITE_NAME; ?>';
    $('#data').load('/auth/load/load_followers', {
      'username': '<?php echo VISIT_USERNAME; ?>',
      'visit_id': '<?php echo VISIT_ID; ?>'
    });
  });
  $('#following').click(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    data = 'page1';
    url = 'following/';
    history.pushState(data, null, url);
    document.title = 'Following | <?php echo VISIT_FIRSTNAME;?> <?php echo VISIT_LASTNAME;?> (@<?php echo VISIT_USERNAME; ?>) | <?php echo SITE_NAME; ?>';
    $('#data').load('/auth/load/load_followings', {
      'username': '<?php echo VISIT_USERNAME; ?>',
      'visit_id': '<?php echo VISIT_ID; ?>'
    });
  });
  $('#message').click(function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    data = 'page1';
    url = 'message/';
    history.pushState(data, null, url);
    document.title = 'Message | <?php echo VISIT_FIRSTNAME;?> <?php echo VISIT_LASTNAME;?> (@<?php echo VISIT_USERNAME; ?>) | <?php echo SITE_NAME; ?>';
    $('#data').load('/auth/load/load_message', {
      'username': '<?php echo VISIT_USERNAME; ?>'
    });
  });
});

Answer 1

history.pushState 的工作原理是:如果您将 url 参数作为

传递

history.pushState('page1', null, 'follower/')

history.pushState('page1', null, 'following/')

history.pushState('page1', null, 'messages/')

您最终会像这样连接它们:'follower/following/messages'。

我假设你的问题是，你需要的是。

history.pushState('page1', null, 'follower')

history.pushState('page1', null, 'following')

history.pushState('page1', null, 'messages')

删除尾随的/，它将覆盖而不是连接。