原生JavaScript开发SPA公告板平台如何获取路由的board_id参数

渲染帖子列表时，给每个帖子元素绑定board_id，推荐用自定义属性+事件委托的方案，性能更好，也不用给每个元素单独绑定事件：

• 渲染列表时给每个帖子项添加data-board-id自定义属性：

// 渲染帖子列表的示例代码
const renderPostList = (postList) => {
  root.innerHTML = postList.map(post => `
    <div class="post-item" data-board-id="${post.board_id}">
      <h3>${post.title}</h3>
      <p>${post.summary}</p>
    </div>
  `).join('')
}

• 给列表容器绑定点击事件，从触发事件的元素上提取board_id：

root.addEventListener('click', (e) => {
  const postItem = e.target.closest('.post-item')
  if (postItem) {
    // 拿到board_id
    const boardId = postItem.dataset.boardId
    // 更新URL不刷新页面
    history.pushState({ boardId }, '', `/board/${boardId}`)
    // 直接调用接口加载详情
    fetchBoardDetails(boardId)
  }
})

不管是用户点击跳转、刷新页面、还是点击浏览器前进后退按钮，都可以通过解析当前路径拿到board_id，适配所有场景：

// 提取board_id的工具函数
const getBoardIdFromUrl = () => {
  // 拆分路径，过滤掉空字符串
  const pathSegments = window.location.pathname.split('/').filter(seg => seg)
  // 判断当前路径是否符合帖子详情页格式
  if (pathSegments.length >= 2 && pathSegments[0] === 'board') {
    return pathSegments[1]
  }
  return null
}

• 页面初始化时先判断路径，用户直接访问帖子详情链接也能正常加载：

window.addEventListener('DOMContentLoaded', () => {
  const boardId = getBoardIdFromUrl()
  if (boardId) {
    fetchBoardDetails(boardId)
  } else {
    // 加载分类列表页
    renderCategoryPage()
  }
})

• 监听浏览器前进后退事件，适配路由切换：

window.addEventListener('popstate', (e) => {
  if (e.state?.boardId) {
    fetchBoardDetails(e.state.boardId)
  } else {
    // 回退到列表页时重新加载列表
    renderCategoryPage()
  }
})

注意：你现有的fetchBoardDetails函数缺失错误处理逻辑，建议补充接口请求失败、返回值异常的捕获逻辑，避免页面白屏。

内容的提问来源于stack exchange，提问作者Kakamotobi