js列表页到详情页

在前端开发中，从列表页跳转到详情页是一个常见的交互流程。以下是关于这个过程的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案：

基础概念

列表页通常展示一组数据的概览，而详情页则展示特定数据的详细信息。用户可以通过点击列表项来跳转到对应的详情页。

优势

用户体验：提供详细信息的查看，增强用户对内容的理解。
信息组织：将信息分层展示，避免页面过于拥挤。
导航清晰：明确的导航路径，方便用户快速找到所需信息。

类型

静态跳转：通过预先定义的URL直接跳转。
动态跳转：根据用户交互动态生成URL进行跳转。
带参数跳转：传递特定参数（如ID）以便详情页获取和展示相应数据。

应用场景

电商网站的商品列表到商品详情页。
新闻网站的文章列表到文章详情页。
社交平台的帖子列表到帖子详情页。

实现方式

在JavaScript中，可以使用以下方法实现列表页到详情页的跳转：

示例代码

假设我们有一个商品列表，点击某个商品后跳转到详情页：

列表页（list.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
</head>
<body>
    <ul id="product-list">
        <li data-id="1">商品A</li>
        <li data-id="2">商品B</li>
        <li data-id="3">商品C</li>
    </ul>

    <script>
        document.getElementById('product-list').addEventListener('click', function(event) {
            if (event.target.tagName === 'LI') {
                const productId = event.target.getAttribute('data-id');
                window.location.href = `detail.html?id=${productId}`;
            }
        });
    </script>
</body>
</html>

详情页（detail.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
</head>
<body>
    <div id="product-detail"></div>

    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const productId = urlParams.get('id');

        // 假设我们有一个获取商品详情的函数
        fetchProductDetail(productId).then(product => {
            document.getElementById('product-detail').innerHTML = `
                <h1>${product.name}</h1>
                <p>${product.description}</p>
                <p>价格: ${product.price}</p>
            `;
        });

        function fetchProductDetail(id) {
            // 这里可以替换为实际的API调用
            const products = {
                1: { name: '商品A', description: '这是商品A的描述', price: '100元' },
                2: { name: '商品B', description: '这是商品B的描述', price: '200元' },
                3: { name: '商品C', description: '这是商品C的描述', price: '300元' }
            };
            return Promise.resolve(products[id]);
        }
    </script>
</body>
</html>