исправлена ​​боковая панель с динамическим контентом в vue js

Question

я пытаюсь сделать мой контентный компонент динамическим. (Используя vue-router)

это мой код:

<template>
    <div class="row mb-3" id="customer-panel">
        <Breadcrumb></Breadcrumb>
        <CustomerSidebar></CustomerSidebar>
        <div class="col-lg-9">
            <PersonalInfo></PersonalInfo>
        </div>
    </div>
</template>

все исправлено на всех страницах, кроме PersonalInfo компонент.

и это мой маршрут:

{
        path: '/customer',
        component: Profile,
        redirect: '/customer/profile',
        children: [
            {
                path: 'profile',
                name: 'profile',
                component: Profile
            },
            {
                path: 'order',
                name: 'order',
                component: Order
            },
        ]
    }

что мне делать?

я не хочу повторять мой код и копировать& прошлое в другом компоненте.я просто хочу, когда я иду, чтобы заказать маршрут, загруженный компонент заказа вместо PersonalInfo .

что является лучшим способом?

Answer 1

Если я правильно понимаю, вы можете попробовать использовать динамический выбор компонентов с помощью атрибута is:

<template>
    <div class="row mb-3" id="customer-panel">
        <Breadcrumb></Breadcrumb>
        <CustomerSidebar></CustomerSidebar>
        <div class="col-lg-9">
            <component is="currentComponent"></component>
        </div>
    </div>
</template>

И связать переменную currentComponent с именем компонента, который вы хотите использовать в текущеммаршрут.

{
    path: '/customer',
    component: Profile,
    redirect: '/customer/profile',
    children: [
        {
            path: 'profile',
            name: 'profile',
            components: { default: Profile, currentComponent: MyComponent1 }
        },
        {
            path: 'order',
            name: 'order',
            component: {default: Order, currentComponent: MyComponent2 } 
        },
    ]
}

См .:

• https://vuejs.org/v2/guide/components.html#Dynamic-Components
• https://router.vuejs.org/guide/essentials/passing-props.html

Answer 2

https://router.vuejs.org/guide/essentials/nested-routes.html

Вы можете получить желаемый результат с помощью <router-view></router-view>

Любые вложенные маршруты / дочерние элементы вашего родительского маршрута будут отображаться здесь, при изменении маршрута.

Компонент:

<template>
    <div class="row mb-3" id="customer-panel">
        <Breadcrumb></Breadcrumb>
        <CustomerSidebar></CustomerSidebar>
        <div class="col-lg-9">

            <router-view></router-view>

        </div>
    </div>
</template>

Маршруты:

{
        path: '/customer',
        component: Customer,
        children: [
            {
                path: 'profile',
                name: 'profile',
                component: Profile
            },
            {
                path: 'order',
                name: 'order',
                component: Order
            },
        ]
}