Django页面跳转异常：点击Products按钮出现404错误求助

看起来你遇到的404问题核心是路由配置不匹配，同时还有视图与模板的混淆问题，我帮你拆解并给出修复步骤：

核心问题点 #

1. 导航栏的「Products」按钮应该是想跳转到商品列表页，但你当前的urls.py里只配置了单个商品详情页的路由（product/<slug>/），而你写的product列表视图函数根本没注册到路由里，导致访问列表页时找不到对应视图，触发404。
2. ItemDetailView错误地使用了product.html作为模板，这会和你打算用来展示列表的product.html冲突，两个视图共用一个模板肯定会出问题。

具体修复步骤 #

1. 修正urls.py，添加商品列表路由

先把views.py里的product函数导入到urls里，然后添加列表页的路由：

from django.urls import path
from .views import (
    ItemDetailView, checkout, HomeView, product  # 新增导入product视图
)

app_name = "core"
urlpatterns = [
    path('', HomeView.as_view(), name='home'),
    path('checkout/', checkout, name='checkout'),
    path('products/', product, name='products'),  # 新增商品列表路由
    path('product/<slug>/', ItemDetailView.as_view(), name='product-detail'),  # 把name改成更清晰的product-detail，避免和列表路由混淆
]

2. 调整详情页视图的模板

在views.py里，给ItemDetailView单独分配一个详情模板，不要和列表页共用：

class ItemDetailView(DetailView):
    model = Item
    template_name = "product_detail.html"  # 修改为详情页专属模板

然后在templates文件夹下创建product_detail.html，用来展示单个商品的详情内容。

3. 修正导航栏的链接

找到导航栏中「Products」按钮的HTML代码，把它的href指向我们刚配置的列表路由：

<a href="{% url 'core:products' %}" class="nav-link">Products</a>

这样点击按钮就会正确跳转到商品列表页，不会再触发404。

4. 验证商品列表模板（product.html）

确保你的product.html里是遍历所有商品的逻辑，比如：

{% for item in items %}
    <div class="product-card">
        <h4>{{ item.title }}</h4>
        <p>价格: {{ item.price }}</p>
        <!-- 跳转到详情页的链接 -->
        <a href="{% url 'core:product-detail' slug=item.slug %}">查看详情</a>
    </div>
{% endfor %}

额外检查：确保Item模型有slug字段

如果你的Item模型里还没有slug字段，要赶紧加上，不然详情页的路由会匹配失败：

# models.py
from django.db import models
from django.utils.text import slugify

class Item(models.Model):
    title = models.CharField(max_length=100)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    slug = models.SlugField(unique=True, blank=True)  # 新增slug字段

    # 自动生成slug
    def save(self, *args, **kwargs):
        if not self.slug:
            self.slug = slugify(self.title)
        super().save(*args, **kwargs)

添加后记得执行迁移命令：

python manage.py makemigrations
python manage.py migrate

最后重启你的Django服务器，所有修改就会生效啦！

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