修复了 vue js 中带有动态内容的侧边栏答案

【问题标题】：fixed sidebar with dynamic content in vue js修复了 vue js 中带有动态内容的侧边栏
【发布时间】：2019-07-08 22:28:06
【问题描述】：

我正在尝试使我的内容组件动态化。（使用 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。

最好的方法是什么？

【问题讨论】：

标签： vue.js vue-component vue-router

【解决方案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
            },
        ]
}

【讨论】：

我在 App.vue（主要组件）中使用。我应该再次使用它吗？
是的，您可以在父组件中使用它来渲染嵌套/子组件

【解决方案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-router 实现