在构建时将 Nuxt 页面数据添加到路由元。还支持 TypeScript。
Nuxt 页面具有meta
允许定义元数据的属性。这些可以通过route.meta
在运行时在中间件中访问。然而,不起作用的是在构建时访问路由对象本身的元数据。当通过extendRoutes或@nuxtjs/sitemap模块对路由进行后处理时,这是需要的。该模块通过解析页面文件、提取元数据并将它们写入meta
页面对应的每个路由的字段来填补这一空白。
ℹ️ 请注意,此模块只能在构建时从页面中提取静态数据。它不适用于动态数据,具体取决于this
. 如果您知道如何改进它,请随时提出问题或拉取请求。
安装
# npm
$ npm install nuxt-route-meta
# Yarn
$ yarn add nuxt-route-meta
用法
将模块添加到您的nuxt.config.js
:
export default {
modules: [
'nuxt-route-meta',
]
}
向您的页面添加一些属性:
<template>
<div>Hello world</div>
</template>
<script>
export default {
auth: true,
meta: {
theme: 'water',
},
}
</script>
而已!现在,您可以route.meta
从vue-router 所知道的任何地方访问元数据。模块获取所有非函数属性的所有属性,并将元属性本身合并到结果中。所以route.meta
从上面的例子是{ auth: true, theme: 'water' }
.
这是一个this.extendRoutes
在模块内部使用它的示例:
export default function () {
this.extendRoutes(routes =>
routes.forEach(route => {
if (route.meta.auth) {
// do something with auth routes
}
})
)
}
TypeScript
该模块具有对 TypeScript 的内置支持。要求是按照 Nuxt TypeScript 文档中的说明安装 TypeScript 模块。
<script lang="ts">
import Vue from 'vue'
export default class MyComponent extends Vue {
meta = {
foo: true,
},
}
</script>
Supported APIs
Plain object
<script>
export default {
auth: true,
meta: {
theme: 'water',
},
}
</script>
这个 API 对 TypeScript 没有多大意义,因为组件中没有类型信息。
Options API
<script>
import Vue from 'vue'
export default class MyComponent extends Vue {
meta = {
foo: true,
},
}
</script>
写这篇文章,Nuxt以打字稿似乎并不支持与喜欢Nuxt特有的属性选项API asyncData
,fetch
,meta
,等。在这种情况下的变化,打开了一个问题。
Class API
<script>
import Vue from 'vue'
export default class MyComponent extends Vue {
meta = {
foo: true,
},
}
</script>
Property decorator
普通JavaScript:安装 nuxt-property-decorator.
<script>
import { Vue, Component } from 'nuxt-property-decorator'
@Component
export default class MyComponent extends Vue {
meta = {
foo: true,
},
}
</script>
TypeScript:
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
meta = {
foo: true,
},
}
</script>
Composition API
此软件包附带对Vue composition API的支持。设置nuxt项目时,请确保遵循 @nuxtjs/composition-api guide closely.
<script>
import { defineComponent } from '@nuxtjs/composition-api'
export default defineComponent({
meta: {
auth: true,
},
})
</script>
也可以看看
- nuxt-mail:向 Nuxt.js 应用程序添加电子邮件发送功能。添加服务器路由,注入变量,并使用 nodemailer 发送电子邮件。
- nuxt-modernizr:将 Modernizr 构建添加到您的 Nuxt.js 应用程序。
- nuxt-mermaid-string:通过提供图表字符串在 Nuxt.js 应用程序中嵌入美人鱼图表。
- nuxt-content-git:@nuxt/content 的附加模块,根据 git 历史替换或添加 createdAt 和 updatedAt 日期。
- nuxt-babel-runtime:支持 babel 的 Nuxt CLI。灵感来自@nuxt/typescript-runtime。