nuxt 路由元

在构建时将 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。