DEV Community

Discussion on: 😲VueJS pages with Dynamic layouts! Problems and a solution!

View post
Collapse
 
dinsmoredesign profile image
Derek D • • Edited

Interesting. I've thought about doing it the way you describe here, but then discovered you can also use parent routes with a blank path, which is far more explicit IMO, ie:

routes: [

    {
        path: '',
        name: 'LayoutA',
        component: LayoutA,
        children: [
            {
                path: '/1',
                name: 'page1',
                component: Page1
            },
            {
                path: '/2',
                name: 'page2',
                component: Page2
            }
        ]
    },
    {
        path: '',
        name: 'LayoutB',
        component: LayoutB,
        children: [
            {
                path: '/3',
                name: 'page3',
                component: Page3
            },
            {
                path: '/4',
                name: 'page4',
                component: Page4
            }
        ]
    }

]
Enter fullscreen mode Exit fullscreen mode

Now I'm curious to see if there's any performance benefits to switching. Will have to test!

Collapse
 
zulu001 profile image
Dixon Etta-Ekuri •

I use a similar setup for my projects too.
But i tend to split my routes in 2 other files, then import them into the main router file.

that way it's easy to manage routing configuration without actually messing with the other parts of the app.

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski •

Yeah, in general, it is the same solution as the one I chose to go with.

I'm not sure if I like the empty path.

Also in our big app, we don't just have one router file.

We have a router file for each path.

For example /someSite/ would have its own router file with the paths for it like someSite/ someSite/:id someSite/new etc.

I would like to see the create output for your solution :)

Collapse
 
jjstanton profile image
jjstanton •

Thank you for this solution! It is very neat and elegant. Has made my app a lot smoother.

I'm using Vue 3 along with router 4.0.0 for this and got it to work flawlessly when all the routes are in a single file but when I break the routes into separate files I am unable to get child routes to work with your layout method. Have you encountered this before?

Collapse
 
subashcs profile image
subashcs •

I am currently doing the same . I have the same question as yours , are there any benefit switching the structure you mentioned with the one described in the blog?