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中修复了带有动态内容的侧边栏

2 个答案: