shopware - 选项卡中的内容不显示在 Shopware 6 中

Question

我在我的模块的详细信息页面上添加了一个自定义选项卡，但是，选项卡已呈现但选项卡的内容未显示。控制台日志中也没有任何错误。

index.js

import './page/wt-shopfinder-list';
import './page/wt-shopfinder-detail';

import './view/wt-shopfinder-detail-base';
import './view/wt-shopfinder-detail-review';

const { Module } = Shopware;

Module.register('example-shopfinder', {
type: 'plugin',
name: 'ExampleShopFinder',
title: 'example-shopfinder.general.mainMenuItemGeneral',
description: 'example-shopfinder.general.descriptionTextModule',
version: '1.0.0',
targetVersion: '1.0.0',
color: '#9AA8B5',
icon: 'default-shopping-paper-bag',
entity:'wt_shop_finder',
routes: {
    index: {
        components: {
            default: "wt-shopfinder-list"
        },
        path: 'index',
        
    },
    detail: {
        component: 'wt-shopfinder-detail',
        path: 'detail/:id',
        redirect: {
            name: 'example.shopfinder.detail.base',
        },
        children: {
            base: {
                component: 'wt-shopfinder-detail-base',
                path: 'base',
                meta: {
                    parentPath: 'example.shopfinder.index'
                },
            },
            review: {
                component: 'wt-shopfinder-detail-review',
                path: 'review',
                meta: {
                    parentPath: 'example.shopfinder.index'
                },
            },
        },
        meta: {
            appSystem: {
                view: 'detail',
            },
        },
        props: {
            default(route) {
                return {
                    shopFinderId: route.params.id,
                };
            },
        },
    }
},

navigation: [{
    id: 'wt-shopfinder',
    label: 'example-shopfinder.menu.mainMenuItemGeneral',
    color: '#ff3d58',
    icon: 'default-shopping-paper-bag-product',
    path: 'example.shopfinder.index',
    parent: "sw-marketing",
    position: 100,
}],
});

wt-shopfinder-detail/wt-shopfinder-detail-html.twig

<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="$tc('sw-customer.detail.tabGeneral')"
                :disabled="false"
            >
                Review
            </sw-tabs-item>
            {% endblock %}
        </sw-tabs>

wt-shopfinder-detail/index.js

//Sharing only the url part for tab navigation
generalRoute() {
        console.log("ID = "+this.shopFinderId);
        return {
            name: 'webbytroops.shopfinder.detail.base',
            params: { id: this.shopFinderId },
        };
    },

wt-shopfinder-detail-base/index.js

import template from './wt-shopfinder-detail-base.html.twig';

const { Component } = Shopware;
const { Criteria } = Shopware.Data;

Component.register('wt-shopfinder-detail-base', {
    template,
    
    inject: ['repositoryFactory'],
    
    metaInfo() {
        return {
            title: "Custom"
        };
    }    
});

wt-shopfinder-detail-base/wt-shopfinder-detail-base.html.twig

<sw-card title="Custom">
    Hello world!
</sw-card>

Answer 1

路由的正确模式是 {moduleName}.{routeName}.{childName} 并且在模块名称中破折号被点替换。因此，您的情况下正确的路线应该是 example.shopfinder.detail.base。

此外，除非您省略它，否则您会在 sw-tabs 组件之后缺少 router-view 标记。

<sw-container>
    <sw-tabs>
        ...
    </sw-tabs>

    <router-view />
</sw-container>