如何用JavaScript在当前标签页生成动态页面并自定义URL路径

我来帮你搞定这个问题！你现在遇到的核心问题有两个：一是没成功阻止锚点的默认跳转行为，二是不知道怎么让URL显示成/letters/1这种自定义格式，同时在当前标签页加载动态内容。咱们一步步来解决：

1. 先阻止锚点的默认跳转 #

你之前的代码里，箭头函数没有接收事件参数，也没明确阻止浏览器的默认跳转行为，所以不管你写return false还是修改window.location，浏览器都会优先执行锚点的默认跳转逻辑。正确的做法是在点击事件里调用event.preventDefault()：

// 先保存初始页面内容，方便后续后退时恢复
const initialContent = document.body.innerHTML;

let letterItems = document.querySelectorAll('.letter');
letterItems.forEach(n => n.addEventListener("click", (e) => {
  // 关键：阻止浏览器跳转到href指定的地址
  e.preventDefault();
  
  // 接下来处理内容加载和URL修改
  // ...
}))

2. 加载动态内容并修改URL #

你有两种方式生成动态页面，结合你的需求，我分别给你示例：

方式一：使用letter.html模板生成内容

如果想用你准备的letter.html作为模板，我们可以用fetch获取模板内容，替换其中的占位符，再替换当前页面的内容，最后用History API修改URL：

letterItems.forEach(n => n.addEventListener("click", (e) => {
  e.preventDefault();
  
  // 获取当前点击锚点里的标题和文本
  const title = n.querySelector('.letter-title').textContent;
  const text = n.querySelector('.letter-text').textContent;
  // 获取锚点的href路径（比如"letters/1"）
  const targetPath = n.getAttribute('href');

  // 加载letter.html模板
  fetch('./letter.html')
    .then(response => response.text())
    .then(templateHtml => {
      // 假设你的模板里有{{title}}和{{text}}这样的占位符，替换成实际内容
      const newPageContent = templateHtml
        .replace('{{title}}', title)
        .replace('{{text}}', text);
      
      // 替换当前页面的内容（这里可以根据需求替换特定容器，不一定是整个body）
      document.body.innerHTML = newPageContent;
      
      // 修改URL为你想要的格式，不会刷新页面
      history.pushState(
        { letterPath: targetPath }, // 存储状态数据，用于后退时恢复
        '', // 页面标题（多数浏览器忽略这个参数）
        targetPath // 要显示的URL路径
      );
    });
}))

方式二：直接用当前页面的内容生成动态页面

如果不想额外请求letter.html，也可以直接用点击锚点里的标题和文本，构造新页面的HTML并替换：

letterItems.forEach(n => n.addEventListener("click", (e) => {
  e.preventDefault();
  
  const title = n.querySelector('.letter-title').textContent;
  const text = n.querySelector('.letter-text').textContent;
  const targetPath = n.getAttribute('href');

  // 构造新页面的HTML内容
  const newPageContent = `
    <div class="letter-detail">
      <h1>${title}</h1>
      <p>${text}</p>
      <!-- 可以加返回按钮之类的元素 -->
      <button onclick="history.back()">返回列表</button>
    </div>
  `;
  
  document.body.innerHTML = newPageContent;
  // 修改URL
  history.pushState({ letterPath: targetPath }, '', targetPath);
}))

3. 处理浏览器的前进后退 #

用pushState修改URL后，点击浏览器的前进/后退按钮，页面不会自动切换内容，所以我们需要监听popstate事件来恢复对应状态：

window.addEventListener('popstate', (event) => {
  if (event.state && event.state.letterPath) {
    // 如果是从动态页面后退，根据存储的路径找到对应的锚点，重新生成内容
    const letterElement = document.querySelector(`a[href="${event.state.letterPath}"]`);
    if (letterElement) {
      const title = letterElement.querySelector('.letter-title').textContent;
      const text = letterElement.querySelector('.letter-text').textContent;
      document.body.innerHTML = `
        <div class="letter-detail">
          <h1>${title}</h1>
          <p>${text}</p>
          <button onclick="history.back()">返回列表</button>
        </div>
      `;
    }
  } else {
    // 回到初始的列表页面
    document.body.innerHTML = initialContent;
  }
});

为什么你之前的window.location不生效？ #

因为你没阻止锚点的默认跳转，浏览器会先执行跳转到letters/1的逻辑，你的window.location修改根本没机会执行。加上e.preventDefault()后，就能让你的代码完全接管点击后的行为啦！

备注：内容来源于stack exchange，提问作者Clarify