nuxt常用方法技巧

useHead

用于动态设置头部信息，title和meta、link、script
- 注入seo的tdk数据
对于seo需要设置的一些数据信息，通过useHead方法来设置比较方便的
设置页面标题和描述，这个是seo的tdk（SEO 常用）
引入第三方脚本的执行，也可以通过useHead来注入
- 注入script脚本
动态 schema.org 结构化数据

definePageMeta

definePageMeta 是 Nuxt 3 中最强大且最常用的编译器宏

简单来说，它的作用是为当前页面组件（位于 pages/ 目录下）定义各种“元信息”和“路由配置”

设置中间件 middleware，可同时运行在服务端和客户端
- 路由中间件
设置布局 layout
- 设置layout为false，为禁用布局
自定义元数据 (Custom Meta)

设置中间件

ts
definePageMeta({
  // 这种方式是 Nuxt 3 处理父路由重定向的最佳实践之
  middleware: (to) => {
  	// 重定向
    if (to.path === '/tabs') {
      return navigateTo('/tabs/one')
    }
  },
})

设置布局

ts
definePageMeta({
  // 使用 layouts/custom.vue
  layout: 'custom',

  // 或者：完全禁用布局
  // layout: false
})

自定义元数据

ts
definePageMeta({
  // 这些属性会被合并到 route.meta 对象中
  title: '用户设置页',
  breadcrumb: '设置',
  requireAdmin: true, // 自定义标志，配合全局中间件使用
  keepAlive: true     // 控制页面缓存
})

路由参数验证

在渲染页面之前，检查路由参数是否合法。如果不合法，可以返回 404 或重定向。

ts
definePageMeta({
  validate: async (route) => {
    // 仅当 id 是数字时才渲染此页面
    const isNumber = /^\d+$/.test(route.params.id as string)
    // 返回 true 通过，返回 false 触发 404
    return isNumber
  }
})

页面过渡动画

Nuxt 默认有页面切换动画，你可以针对特定页面修改或禁用它。

ts
definePageMeta({
  // 禁用此页面的过渡动画
  pageTransition: false,
  
  // 或者配置特定的过渡类名
  // pageTransition: {
  //   name: 'rotate',
  //   mode: 'out-in'
  // }
})

配置别名

images别名是最常用的，来直接导入images下的图片

ts
import { fileURLToPath } from 'node:url'

export default defineNuxtConfig({
  alias: {
    'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
    'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
    'data': fileURLToPath(new URL('./assets/other/data', import.meta.url)),
  },
})

使用

vue

 <img src="~images/main-bg.jpg">

useHead​

definePageMeta​

设置中间件​

设置布局​

自定义元数据​

路由参数验证​

页面过渡动画​

相关别名​

配置别名​

useHead

definePageMeta

设置中间件

设置布局

自定义元数据

路由参数验证

页面过渡动画

相关别名

配置别名