使用 typescript 的 Nuxtjs 在使用 meta 时有问题

Question

在 Nuxtjs 中，我放置了页面的 permissionKeys，以便我可以在中间件中检查用户的访问权限。当我的脚本语言是 js 时，一切都很顺利，但是，在 lagn="ts" 的情况下，我会遇到错误。

我一直在寻找解决方案并使用 vue-meta 包，但我最终遇到了同样的错误。

<script lang="ts">
export default {
  meta: {
    authorization: ['Organization/List']
  },
  data() {
    return {
           text: this.$t('organization.title'),
    }
   }
}

在这种情况下，我遇到了这个错误："Property '$t' does not exist on type '{ meta: { authorization: string[]; }; data(): any; }'."

我不知道使用元变量和全局变量有什么问题。

Answer 1

通过使用 <type="ts">，我们正在调用 TypeScript 类型检查。现在让我们分解代码，看看为什么错误是合法的。

const obj = {
  meta: {
    authorization: ['Organization/List']
  },
  data() {
    return {
           text: this.$t('organization.title'),
    }
   }
};

export default obj;

现在，在data方法中，this引用对象obj，我们引用this的属性 $t ，共 obj 个。明明没有属性.

Answer 2

你可以通过使用 nuxt-属性-装饰器来实现这指的是头部属性我不确定这是否适合你对插件 vue-meta 的需求，但你可以参考下面给出的 link 关于创建装饰器来设置 vue-meta 包

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component({
  layout: 'home',
  head() {
    return {
      title: 'Test Title',
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  }
})
export default class MainPage extends Vue {

}
</script>

或创建您自己的装饰器，以便您可以在 class

中定义它

@Meta

https://github.com/nuxt/vue-meta/issues/181#issuecomment-390258209

@2019 年 1 月 9 日更新

您可以使用 extendRoutes，这是不可取的，但仍然有效:)

创建 permissions.js 并在其中看起来像这样

export const normalUser = [
  'route-name-invoices',
  'route-name-invoices-create'
];

在你的 nuxt.config.js - 导入你的权限 js

import { normalUser } from './permissions'

...
// find the router or you can define it
router: {
  extendRoutes(routes) {
    return routes.map(route => {
      if (normalUser.includes(route.name)) {
        route.meta = { authorization: ['Organization/list'] };
      }
      return route;
    });
  }
}

Answer 3

最近好像在route中添加了meta key的定义： https://github.com/nuxt/typescript/pull/89

使用 typescript 的 Nuxtjs 在使用 meta 时有问题

Nuxtjs using typescript has problem with using meta

typescript

meta

nuxt.js