一种解决方法是使用JavaScript中的History API来实现不重新创建页面的导航。以下是一个包含代码示例的解决方法：

// 获取所有的导航链接
const navLinks = document.querySelectorAll('a');

// 遍历所有的导航链接
navLinks.forEach(link => {
  // 给每个导航链接添加点击事件监听器
  link.addEventListener('click', (event) => {
    // 阻止默认的链接点击事件
    event.preventDefault();

    // 获取导航链接的href属性值
    const href = link.getAttribute('href');

    // 使用History API的pushState方法来修改浏览器的URL，但不重新加载页面
    window.history.pushState(null, null, href);

    // 使用你自己的函数来更新页面内容
    updateContent(href);
  });
});

// 根据URL更新页面内容的函数
function updateContent(url) {
  // 在这里根据URL加载对应的内容，可以使用AJAX或者其他方式来获取内容并更新页面
  // 以下是一个简单的示例，用于演示更新页面内容的过程
  const contentElement = document.getElementById('content');
  contentElement.innerHTML = 'Loading...';

  setTimeout(() => {
    contentElement.innerHTML = `Content for ${url}`;
  }, 1000);
}

上述代码中，首先获取所有的导航链接，并给每个导航链接添加点击事件监听器。在点击事件处理程序中，使用event.preventDefault()阻止默认的链接点击事件。然后，使用History API的pushState方法修改浏览器的URL，但不重新加载页面。最后，调用updateContent函数来根据URL更新页面内容。

请注意，上述代码中的updateContent函数只是一个示例，实际上你可能需要根据自己的需求来实现加载和更新页面内容的逻辑。