在 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

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
            },
        ]
}

Answer 2

如果我理解正确，您可以尝试使用 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 } 
        },
    ]
}

参见：

在 vue js 中固定带有动态内容的侧边栏

fixed sidebar with dynamic content in vue js

vue.js

vue-router

vue-component