Nuxtjs+Typescript动态生成meta标签的问题

2020.02.14 09:02:18
72
阅读约 1 分钟
Scroll down

Nuxtjs开发过程中,存在使用head()来设置meta信息失效的问题,在这里记录一下解决方案。

插件解决方法 #

npm i @sophosoft/vue-meta-decorator

全局引入一下插件

import VueMeta from 'vue-meta'
Vue.use(VueMeta)

然后可以在页面中单独引入,这种方式可以取到class内部的数据

import { Meta } from '@sophosoft/vue-meta-decorator'
export default class Post extends Vue {
  @Meta
  getMetaInfo() {
    return {
      title: this.post.title
    }
  }
 }

更好的解决方案 #

plugins目录下创建一个global.ts

import { Component } from 'nuxt-property-decorator'
Component.registerHooks(['asyncData', 'head'])

现在我们依然可以在单独的页面中以常规的方式引入headasyncData

export default class Page extends Vue {
  head() {
    return {
      title: this.id ? '他' : '我' + '的主页'
    }
  }
}

设置成功 #

img

阅读:72 . 字数:149 发布于 8 个月前
Copyright 2018-2020 Siques