no layout

[moliu666]

Sometimes some pages need no layout ，like /login

+------------------+           
| Login            |
|                  |                
+------------------+   

But now there is always default layout

+------------------+           
| Default          |
| + -------------+ |            
| |    Login     | |   
+------------------+ 

To fix this, I rebuild it

// src/RouteLayout.ts - getClientCode
export function setupLayouts(routes) {
  return routes.map(route => {
    const isBoolean = typeof route.meta?.layout === 'boolean'
    if(isBoolean && !route.meta?.layout) {
      return route
    } else {
      let componentName = !isBoolean && route.meta?.layout ? route.meta?.layout : '${options.defaultLayout}'
      return {
        path: route.path,
        component: layouts[componentName],
        children: [ {...route, path: ''} ],
      }
    }
  })
}

useage

<route lang="yaml">
meta:
  layout: false
</route>

if the layout property is a boolean and false, no layout

if the layout property is not a boolean and type inference is true, use layout property as componentName

other, use default layout

[moliu666]

Beyond that, I have a more radical idea.

We can provide a hook function for users to customize

The initial idea is as follows

// src/RouteLayout.ts - getClientCode
export function setupLayouts(routes, fn) {
  if(tyepof fn === 'function') return fn(routes, layouts, options)
  ...
}

When the user provides a function, the default behavior is completely replaced

import { createRouter, createWebHistory } from 'vue-router';
import { setupLayouts } from 'virtual:generated-layouts';
import generatedRoutes from '~pages';

const router = createRouter({
  history: createWebHistory(),
  routes: setupLayouts(generatedRoutes, (routes, layouts, options) => {
    // to do someting
    // return routes
  })
});

[itmanyong]

当不设置插件的defaultLayout选项时,页面没有指定layout的值就不会使用layout

[zhuhaobam]

You may need to do this, manually setlayout

const routesLayouts = generatedRoutes.map(v => {
  const currentMenu = v.meta?.layout !== false ? setupLayouts([v])[0] : v
  return currentMenu
})

[zhuhaobam]

I changed the default address. I changed the index under the layouts directory to the layout definition, so I manually set the layout in the route, so that layout false is set for each page when it is not needed

[negezor]

As a solution in my project, I just use a special layout called empty:

<!-- layouts/empty.vue -->
<template>
    <RouterView v-slot="{ Component }">
        <Suspense>
            <div>
                <component :is="Component" />
            </div>
        </Suspense>
    </RouterView>
</template>

Then in the need pages:

<!-- pages/some-cool-page.vue -->
<route lang="yaml">
meta:
  layout: 'empty'
</route>