definePageMeta - 设置页面元数据 #

definePageMeta是一个编译宏，可以用它来为pages目录下的页面组件设置元数据（除非另有设置）。这样就可以为 Nuxt 应用程序的每个静态或动态路由设置自定义元数据。

阅读页面元数据中的更多信息

<!-- ~/pages/some-page.vue -->
<script setup>
  definePageMeta({
    title: 'Articles'
  })
</script>

类型 #

definePageMeta(meta: PageMeta) => void

interface PageMeta {
  pageTransition?: boolean | TransitionProps
  layoutTransition?: boolean | TransitionProps
  key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
  keepalive?: boolean | KeepAliveProps
  layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
  middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
  [key: string]: any
}

参数 #

meta #

• Type: PageMeta

  接受以下页面元数据的对象：

  pageTransition #

  • Type: boolean | TransitionProps

    设置应用于当前页面的过渡效果的名称。还可以将此值设置为false以禁用页面过渡效果。

  layoutTransition #

  • Type: boolean | TransitionProps

    设置要应用于当前布局的过渡效果的名称。也可以将此值设置为false以禁用布局过渡效果。

  key #

  • Type: false | string | ((route: RouteLocationNormalizedLoaded) => string)

    当需要对<NuxtPage>组件重新渲染的时候进行更多控制时设置key值。

  keepalive #

  • Type: boolean | KeepAliveProps

    当想在路由变化中保留页面状态时，设置为true，或者使用KeepAliveProps进行细粒度的控制。

  layout #

  • Type: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>

    为每个路由设置一个静态或动态的布局名称。在需要禁用默认布局的情况下，可以将其设置为false。

  middleware #

  • Type: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>

    直接在definePageMeta中定义匿名或命名中间件。了解有关路由中间件的更多信息。

  [key: string] #

  • Type: any

    除了上述属性之外，还可以设置自定义元数据。可能希望通过增加元对象的类型，以类型安全的方式执行此操作。

基础用法 #

下面的例子展示了:

• key可以是一个有返回值的函数
• keepalive属性如何确保<modal>组件在多个组件之间切换时不会被缓存
• 添加pageType作为一个自定义属性

<!-- ~/pages/some-page.vue -->
<script setup>
  definePageMeta({
    key: (route) => route.fullPath,

    keepalive: {
      exclude: ['modal']
    },

    pageType: 'Checkout'
  })
</script>

定义中间件 #

下面的例子展示了如何使用函数直接在definePageMeta内定义中间件。或设置为一个字符串和位于middleware目录的中间件文件名相匹配。

<!-- ~/pages/some-page.vue -->
<script setup>
  definePageMeta({
    // define middleware as a function
    middleware: [
      function (to, from) {
        const auth = useState('auth')
        
        if (!auth.value.authenticated) {
            return navigateTo('/login')
        }
        
        return navigateTo('/checkout')
      }
    ],

    // ... or a string
    middleware: 'auth'
    
    // ... or multiple strings
    middleware: ['auth', 'another-named-middleware']
})
</script>

定义布局 #

设置一个和layouts目录下的布局文件名相匹配的字符串。或将layout设置为false来禁用默认布局。

<!-- ~/pages/some-page.vue -->
<script setup>
  definePageMeta({
    // 设置自定义布局，该 layout 的值需要和 layouts 目录下的布局文件名相同
    layout: 'admin'
    
    // 或者 禁用默认布局
    layout: false
  })
</script>