v4 (4.0.0)
Nuxt on GitHub

defineRouteRules

源代码
在页面级别定义路由规则以实现混合渲染。
此功能为实验性功能，要使用它，你必须在 nuxt.config 中启用 experimental.inlineRouteRules 选项。

使用方法

pages/index.vue
<script setup lang="ts">
defineRouteRules({
  prerender: true
})
</script>

<template>
  <h1>你好，世界！</h1>
</template>

将被转换为：

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true }
  }
})
当运行 nuxt build 时，首页将在 .output/public/index.html 中被预渲染并以静态方式提供。

注意事项

  • 在 ~/pages/foo/bar.vue 中定义的规则将应用于 /foo/bar 请求。
  • 在 ~/pages/foo/[id].vue 中定义的规则将应用于 /foo/** 请求。

为了获得更多控制，例如如果你在页面的 definePageMeta 中使用了自定义的 path 或 alias，你应该直接在 nuxt.config 中设置 routeRules。

了解更多关于 routeRules 的信息。