点击View More跳转后，如何获取产品标题、图片及信息并插入至产品页面模板？

问题核心是页面跳转后，原页面的DOM会被浏览器销毁，自然没法访问原元素的数据。下面给你几个实用的解决思路：

方法1：通过URL参数传递数据 #

点击按钮时，把产品的关键信息（标题、图片地址、描述）编码后拼到跳转URL的参数里，产品页面加载时解析这些参数来渲染内容。

原页面代码示例： #

// 给所有view-more按钮绑定点击事件
document.querySelectorAll('.view-more').forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取当前按钮对应的产品元素（假设按钮在产品卡片内）
    const productCard = this.closest('.product-card');
    // 提取产品数据
    const productData = {
      title: productCard.querySelector('.product-title').textContent.trim(),
      image: productCard.querySelector('.product-img').src,
      info: productCard.querySelector('.product-info').textContent.trim()
    };

    // 把数据转成URL参数
    const params = new URLSearchParams(productData);
    // 跳转到产品页面并带上参数
    window.location.href = `product.html?${params.toString()}`;
  });
});

产品页面代码示例： #

// 页面加载时解析URL参数
window.addEventListener('DOMContentLoaded', function() {
  const params = new URLSearchParams(window.location.search);
  // 提取参数数据
  const productTitle = params.get('title');
  const productImage = params.get('image');
  const productInfo = params.get('info');

  // 插入到页面模板中
  document.querySelector('.product-page-title').textContent = productTitle;
  document.querySelector('.product-page-img').src = productImage;
  document.querySelector('.product-page-info').textContent = productInfo;
});

注意：如果产品信息里有特殊字符（比如&、空格），URLSearchParams会自动编码，不用担心乱码问题；但如果数据量太大，不适合用这种方法，因为URL有长度限制。

方法2：用localStorage临时存储数据 #

点击按钮时把产品数据存到localStorage，产品页面加载后读取数据渲染，用完可以删掉避免残留。

原页面代码示例： #

document.querySelectorAll('.view-more').forEach(btn => {
  btn.addEventListener('click', function() {
    const productCard = this.closest('.product-card');
    const productData = {
      title: productCard.querySelector('.product-title').textContent.trim(),
      image: productCard.querySelector('.product-img').src,
      info: productCard.querySelector('.product-info').textContent.trim()
    };

    // 存到localStorage，注意要转成JSON字符串
    localStorage.setItem('currentProduct', JSON.stringify(productData));
    // 跳转页面
    window.location.href = 'product.html';
  });
});

产品页面代码示例： #

window.addEventListener('DOMContentLoaded', function() {
  // 读取localStorage里的数据
  const productStr = localStorage.getItem('currentProduct');
  if (!productStr) return;

  const productData = JSON.parse(productStr);
  // 渲染到页面
  document.querySelector('.product-page-title').textContent = productData.title;
  document.querySelector('.product-page-img').src = productData.image;
  document.querySelector('.product-page-info').textContent = productData.info;

  // 用完删掉，避免下次打开产品页面显示旧数据
  localStorage.removeItem('currentProduct');
});

注意：localStorage存储的是字符串，所以要先转JSON；另外不要存敏感数据，因为localStorage是明文存储的。

方法3：如果是单页应用（SPA） #

如果你的项目是Vue、React这类SPA，可以用路由的状态传递（比如Vue Router的params/state，React Router的state），跳转时直接传递对象数据，不用转参数或存本地，这种更优雅。

比如Vue Router的示例：

// 原页面跳转时传递数据
this.$router.push({
  path: '/product',
  params: { productData: productData }
});

// 产品页面接收数据
this.$route.params.productData;

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