Reason why views import layouts instead of using nested routes?

[tamara-bain]

First off I am a huge fan of your work 👍 It's been massively helpful to see all the tricks you employ when setting up an enterprise project for vue.js.

My question is about how views are setup in this project. They all import a layout as a component. And layouts themselves define a slot for the view eg. The 404 view

<template>
  <Layout>
    <h1 :class="$style.title">
      404
      <span v-if="resource">
        {{ resource }}
      </span>
      Not Found
    </h1>
  </Layout>
</template>

and the Main layout

<template>
  <div :class="$style.container">
    <NavBar/>
   <slot/>
  </div>
</template>

My question is there some advantage of importing layouts this way over using router-view?

eg.

<template>
  <div :class="$style.container">
    <NavBar/>
   <router-view/>
  </div>
</template>

{
    path: "/",
    component: () => lazyLoadView(import("@layouts/main")),
    children: [
    {
        path: '/404',
        name: '404',
        component: require('@views/404').default,
     }
}

Router-view would prevent the layout from being reloaded when you switch between views that use the same layout. This can stop the app from 'flickering' as you change between views. This to me seems like a better way to go about layouts/views - am I missing something?

[chrisvfritz]

Great question. 🙂 The short answer is versatility. There are often multiple routes on the root level that all use different layouts. For example, /, /dashboard, and /terms might all use different layouts. Then under /dashboard, it's probably likely that you'll use nested routes the way you suggest for different tabs/views within that dashboard.

Does that make sense?

[tamara-bain]

Thanks for clarifying Chris! I think vue-router has the capability to define nested routes with either a relative or absolute url.

So you can leverage component nesting without using a nested url.

You could have /dashboard, /dashboard/settings, and /registration all share a layout. This might have been a new addition in vue-router 3.0 !

[chrisvfritz]

Sorry for the delay in reply @tamara-bain! 🙂 I'm open to rethinking this strategy, but I haven't personally found a way to handle different layouts for root-level paths using nested routes that doesn't feel kind of awkward to me. Do you happen to have an example you can share of how you handle completely unrelated concerns that just happen to share the same layout (e.g. centered content)?