routes don't support "children"?

[nuxt]

routes don't support "children"?

[Atinux]

I'm re-opening this issue to know what think the community about it.

We will need to find a way to create child route with the pages folder as well and not only in the nuxt.config.js configuration.

For example:

-| pages/
----| user/
-------| index.vue
-------| profile.vue
-------| settings.vue
----| user.vue

The rule will be:

If a folder has the same name of a page, all the pages inside this folder will be the page children

This would generate:

[
  {
    path: '/user',
    component: 'pages/user.vue',
    children: [
      { path: '', component: 'pages/user/index.vue' },
      { path: 'profile', component: 'pages/user/profile.vue' },
      { path: 'settings', component: 'pages/user/settings.vue' }
    ]
  }
]

And pages/user.vue will have to use <router-view></router-view> inside its template.

[beeplin]

Sorry for the vagueness of the term 'single-page app'. Let me take your recent nuxt-children-routes as an example:

When we are at /parent and click a link to go to /parent/foo , a 'multiple-page app' would re-render both parent and foo on the server, and then transfer the whole new html page (including both parent and foo) to the browser to replace the whole old page. So if we look from the browser side, \parent and \parent\foo are two different pages served by the server.

But in a so-called single-page app, when going from \parent to \parent\foo, the parent component should be reused. Only the new component foo is created and rendered, and then inserted into its proper position in the existing page. So if we look from the browser, we don't see a brand new page loaded, but only see a part of the existing page inserted/patched/removed.

Which is the case in the actual nuxt-children-routes example?

[Atinux]

It is 100% correct.

Actually you can implement your own child views easily by watching on $route in the page component and using with the is property.

I can create and example if you want to see how to implement it?

[beeplin]

sure, looking forward to the example. Many thanks!

[beeplin]

looks like currently nuxt is mainly for building multiple-page apps? If we are building a single-page app but still want server rendered components according to the router url, I guess the most natual way is to support nested components (children and )

[Atinux]

@beeplin please take a look at this demo: https://hyperdev.com/#!/project/nuxt-children-routes

Live demo: https://nuxt-children-routes.hyperdev.space/parent

I use <component :is="child"/> to handle the child component of the given route, I also added a custom route in nuxt.config.js to tell Nuxt.js to call the pages/index.vue component on the /parent/:component? route.

[Atinux]

I am not sure to understand when you are talking about a single-page app, could you describe me what you mean by single-page app?

[Atinux]

It is indeed the case with nuxt-children-routes 😄

[beeplin]

You mean it's like 'single-page app'? That's wonderful~

If so, is it possible to support children in routes and < router-view> in template? Using :is="xxx" can handle simple cases, but when the router goes complicated, it would be terrible to manually parse the url and handle multiple layers of :is. It would be perfect if we could use vue-router in the same old way as if we were using client-side-rendering.

[Atinux]

Hi @beeplin

You can now create children routes with the version 0.9.0 of Nuxt.js

Explanations here

[beeplin]

cool！

[dotnetCarpenter]

@Atinux I still don't see how the _id.vue component is re-used. As far as I can tell the entire <div class="user"> is removed from DOM an re-inserted.

My use-case is that I have a <object> element and need to change the data attribute but I can't use a child-route as it is implemented today because it removes the element (vue.js should do a diff on the v-node and just update the data attribute) instead of just updating the data attribute.

Am I missing something from your example?

[dotnetCarpenter]

Ahh.. I should use <nuxt-child/> instead.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.