参考课堂内容，完成子页面的加载，点击链接跳转完整子页面内容，或者直接在浏览器输入/product?id=0跳转对应子页面内容

在网页开发中，通常通过JavaScript或相关的前端框架如React、Vue或Angular来实现子页面的动态加载。当你点击链接时，可以编写这样的代码：

// HTML 部分
<a href="#!/product/0" onclick="loadSubpage(event)">查看产品</a>

// JavaScript 部分
function loadSubpage(event) {
  event.preventDefault(); // 阻止默认的页面刷新
  const productId = event.target.getAttribute('href').split('/')[2]; // 获取id参数
  fetch(`/product/${productId}`) // 使用fetch API 或其他库（如axios）
    .then(response => response.ok ? response.text() : Promise.reject())
    .then(data => { // 成功加载后处理数据
      const subPageElement = document.getElementById('sub-page-container'); // 获取目标容器元素
      subPageElement.innerHTML = data; // 渲染子页面内容
    })
    .catch(error => console.error('Failed to load subpage:', error));
}

在这个例子中，当用户点击链接时，会阻止默认的行为（避免新页面加载），然后根据URL提取出`id`参数，使用它来请求服务器上的子页面内容。如果请求成功，将响应结果替换到指定的容器元素内显示。如果请求失败，则记录错误。