Nuxt3-自定义路由配置以及使用自定义布局layout

一、不自定义路由下，如何使用自定义布局

1、根目录下 app.vue

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

2、layout 文件夹下新建文件 main.vue

<template>
  <div class="_app">
    主布局
    <slot></slot>
  </div>
</template>
<style scoped lang="scss">
._app{}
</style>

3、页面内使用自定义布局 pages 文件夹下 创建 mine.vue

// 第一种方式
<template>
  <div class="mine">
    个人中心5656
  </div>
</template>

<script setup lang='ts'>
definePageMeta({
  layout: 'main',
  index: 2, // main.vue 文件 传递参数
})
</script>

<style scoped lang='scss'>
</style>

// 第二种方式
<template>
  <NuxtLayout name="main">
    <div class="mine">
      个人中心5656
    </div>
  </NuxtLayout>
</template>

<script setup lang='ts'>
definePageMeta({
  layout: false, // 去除默认布局 
})
</script>

<style scoped lang='scss'>
</style>

二、自定义路由、及如何使用自定义布局

1、router.options.ts 方式自定义路由 （推荐）

根目录下创建 app 文件夹，app 文件夹下创建 router.options.ts 文件

// 页面内使用 definePageMeta({layout: 'main'}) 会失效
const reRouter = [
  {
    path: '/',
    name: 'Home',
    component: ()=> import('../pages/home/index.vue')
  }, {
    path: '/mine-a',
    name: 'Mine',
    component: ()=> import('../pages/mine/index.vue'),
    meta: {
      layout: 'main', // 通过此种方式使用 自定义布局
    }
  },
]
export default {
  routes:(_routes: any)=>[
    ...reRouter
  ]
}

2、pages:extend 方式自定义路由（该文件会失去热更新）

1）、根目录下创建 router 文件夹，router文件夹下创建 index.ts

// index.ts
import type { NuxtPage } from "nuxt/schema";
const path = require("path");

const resolve = (pagePath: any) => path.resolve(pagePath)

const routerList: NuxtPage[] = [
  {
    path: '/',
    name: 'Home',
    file: resolve('pages/home/index.vue')
  }, {
    path: '/mine',
    name: 'Mine',
    file: resolve('pages/mine/index.vue')
  },
]
export default {
  'pages:extend': (routes: any) => {
    routes.splice(0);
    routes.push(...(routerList as NuxtPage[]));
  }
};

2）、nuxt.config.ts 文件配置路由

import router from "./router/index";

export default defineNuxtConfig({
  hooks: {
    ...router
  }
})

3）、自定义布局

<template>
  <NuxtLayout name="main">
    <div class="mine">
      个人中心5656
    </div>
  </NuxtLayout>
</template>

<script setup lang='ts'>
definePageMeta({
  layout: 'main', 
})
</script>

<style scoped lang='scss'>
</style>