Shopware 6自定义标签页内容不显示问题求助

我之前在开发Shopware 6自定义模块时也碰到过几乎一模一样的问题——标签页渲染正常，但里面的内容就是不显示，控制台还没任何报错提示，排查起来确实有点头疼。你的问题主要出在两个关键细节上：

问题诊断 #

• 路由名称不匹配：在wt-shopfinder-detail/index.js的generalRoute方法里，你返回的路由名称是webbytroops.shopfinder.detail.base，但模块注册时定义的base路由名称是example.shopfinder.detail.base（模块ID是example-shopfinder，所以路由前缀会自动加上example.shopfinder）。这个名称不匹配会导致标签页无法正确关联到对应的子路由组件。
• 缺少路由视图容器：你的wt-shopfinder-detail-html.twig只渲染了标签页切换按钮，但没有添加<router-view>标签。Shopware的嵌套路由需要父组件提供这个容器，才能把子路由对应的组件内容渲染出来。

修复步骤 #

1. 修正路由名称匹配 #

修改wt-shopfinder-detail/index.js中的路由方法，确保路由名称和模块注册的一致，同时补充reviewRoute方法：

// 完整的wt-shopfinder-detail组件里的路由相关计算属性
computed: {
    generalRoute() {
        console.log("ID = "+this.shopFinderId);
        return {
            name: 'example.shopfinder.detail.base', // 改为和模块路由一致的名称
            params: { id: this.shopFinderId },
        };
    },
    reviewRoute() {
        return {
            name: 'example.shopfinder.detail.review',
            params: { id: this.shopFinderId },
        };
    }
}

另外要确保你的wt-shopfinder-detail组件已经正确接收了shopFinderId props（从路由配置看你已经设置了，这部分没问题）。

2. 添加路由视图容器到父组件模板 #

修改wt-shopfinder-detail-html.twig，在sw-tabs标签后添加<router-view>，子路由的内容会自动渲染到这个容器里：

<sw-tabs class="wt_shopfinder-detail-page__tabs" position-identifier="wt-shopfinder-detail" >
    {% block wt_shopfinder_detail_content_tabs_general %}
        <sw-tabs-item :route="generalRoute" :title="$tc('sw-customer.detail.tabGeneral')" :disabled="false" >
            {{ $tc('sw-promotion-v2.detail.tabs.tabGeneral') }}
        </sw-tabs-item>
    {% endblock %}
    {% block wt_shopfinder_detail_content_tabs_general2 %}
        <sw-tabs-item :route="reviewRoute" :title="Review" :disabled="false" >
            Review
        </sw-tabs-item>
    {% endblock %}
</sw-tabs>
<!-- 新增：子路由内容的渲染容器 -->
<router-view></router-view>

3. 额外确认（可选） #

检查你的子组件（wt-shopfinder-detail-base和wt-shopfinder-detail-review）是否已经正确在模块的index.js中导入并注册，从你提供的代码看这部分是没问题的，但可以再确认组件名称和路由配置里的component字段完全一致。

做完这些修改后，重新编译模块并刷新后台页面，点击标签页应该就能正常显示对应的内容了。

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