fixed sidebar with dynamic content in vue js

Question

i'm trying to make my content component dynamic.(using vue-router)

this is my code:

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

any thing is fixed in all pages except PersonalInfo component.

and this is my route:

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

what should i do?

i don't want to repeat my code and copy & past in another component. i just want when i go to order route, Order component loaded instead of PersonalInfo.

what is the best way?

trueChazza · Accepted Answer · 2019-02-14 20:42:32Z

2

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

You can acheive your desired result with <router-view></router-view>

Any nested routes / children of your parent route will be rendered here, on route change.

Component:

<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>

Routes:

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

answered Feb 14, 2019 at 20:42

trueChazza

5292 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mr stark Over a year ago

i'm using <router-view></router-view> in App.vue (main component). should i use it again?

trueChazza Over a year ago

Yes, you can use it within a parent component to render nested / children

tony19 · Accepted Answer · 2022-07-15 02:19:24Z

0

If I understand correctly, you could try using dynamic component selection using the is attribute:

<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>

And associate currentComponent variable to the name of the component you want to use in the current route.

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

See:

edited Jul 15, 2022 at 2:19

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Feb 14, 2019 at 20:48

F.Igor

4,5401 gold badge25 silver badges31 bronze badges

1 Comment

trueChazza Over a year ago

this is not a direct vue-router implementation as asked

Collectives™ on Stack Overflow

fixed sidebar with dynamic content in vue js

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related