将布局和中间件应用于父路由和子路由 Nuxt 3

Question

我正在构建我的第一个 nuxt3 应用程序，并且我正在尝试将身份验证添加到特定路线及其子路线。我是否需要在每个孩子中添加以下代码才能拥有身份验证中间件？

definePageMeta({
    layout: "default",
    name: "become-a-pro",
    middleware: "auth",
});

有办法只在父页面添加吗？

我的文件夹/文件结构非常简单，就像这样的 smt，我想将所有子项设置为具有身份验证中间件，而不将其添加到每个子项中：

----- parent
     |--- children 1
          |--- children 1a
          |--- children 1b
     |--- children 2
          |--- children 2a
          |--- children 2b
     |--- children 3
          |--- children 3a
          |--- children 3b

Answer 1

是的，有一种方法可以添加中间件和布局。

页面结构示例：

--pages
   |--index.vue
   |--parent.vue // File     
   |--parent // Folder
      |--index.vue // Parent Main page
      |--child1.vue
      |--child2.vue      

在你的

~/pages/parent.vue

在此页面中，您需要用

NuxtPage

组件包裹

NuxtLayout

。在

Nuxtlayout

组件中，它有一个名为

name

的 prop。该名称应与布局文件夹中可用文件的名称匹配。

您还可以使用

definePageMeta

并调用中间件。由于这是父路由，因此中间件将应用于可用的子路由。

<script lang="ts" setup>
definePageMeta({
  middleware: ['aut']
})
</script>
<template>
  <div>
    <NuxtLayout name="default">
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
<style scoped lang="css"></style>

或者

~/pages/parent.vue

<script lang="ts" setup>
definePageMeta({
  middleware: ['aut'],
  layout: 'admin'
})
</script>
<template>
  <div>
    <NuxtPage />
  </div>
</template>
<style scoped lang="css"></style>

两个选项的作用相同。

~app.vue

<script setup>

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

希望有帮助！

Answer 2

您的所有子路由（子路由 1、1a、1b、2 等）都从 Parent.vue 继承 auth 中间件。子级中不需要进一步定义PageMeta。