当我访问我的内部页面vue-meta时，新页面值不会更新。

代码

app.js

import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
    refreshOnceOnNavigation: true
})

App.vue （主要成分）

export default {
  metaInfo() {
    return {
      title: process.env.MIX_APP_NAME,
      titleTemplate: `%s | ${process.env.MIX_APP_NAME}`,
      meta: [
        { name: "robots", content: "index,follow" },
        {
          vmid: "description",
          name: "description",
          content:
            "..........",
        },
        // and many more....
      ],
   }
  }
}

post.vue （内部组件）

export default {
  name: "singePost",
  data() {
    return {
      post: "",
    };
},
metaInfo() {
    return {
        title: this.post.name, // not receiving data
        meta: [ …

我正在使用vue-meta动态更改我的元标记.我想仅在某些特定页面上更改它.

我正在使用metaInfo函数并尝试更改,例如,标题.但是来自我的getter的数据是未定义的,这就是我无法更改元标记中的标题的原因.似乎metaInfo函数尝试在组件实际拥有它之前访问数据.

这是我在组件中的代码:

<template>
...
</template>

<script>
 export default {
     metaInfo() {
       return {
         title: this.getViewPage.data.meta.title, // data is undefined
    };
  },
  created() {
     this.loadViewPage();
  },
  computed: {
     ...mapGetters(['getViewPage']),
  },
  methods: {
     ...mapActions(['loadViewPage']),
};
</script>

似乎Vue Meta已升级为使用名为的新 npm 包处理 Vue.js 3vue-3-meta

在 Vue.js 3 之前，vue-meta通过将其添加到 Vue 实例中很容易使用：

import Vue from 'vue'
import VueMeta from 'vue-meta'
 
Vue.use(VueMeta, {
  // optional pluginOptions
  refreshOnceOnNavigation: true
})

但是在 Vue.js 3 中，没有 Vue 实例；而是通过运行createApp这样的方式来创建应用程序：

const app = createApp(App);
const router = createVueRouter();

app.use(router);
// need to make app use Vue-Meta here

我找不到任何文档vue-3-meta。import VueMeta from 'vue-meta'不再有效。

如何vue-3-meta正确导入插件并将其与app之前版本中的一样使用？

基本上，我使用 Nuxt 2.9.2，并尝试使用 innerHTML 方法来内联 Google Optimize 脚本，但每当我运行 npm rungenerate 时，代码都会转换某些方面，即使 __dangerouslyDisableSanitizers 将innerHTML列入白名单。

这是我在 Nuxt Config 头对象中的脚本

script: [
    {
      innerHTML: `(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;})(window,document.documentElement,'async-hide','dataLayer', 500 , ${JSON.stringify(
        { [process.env.GOOGLE_OPTIMIZE_ID]: true }
      )})`
    }
  ],
  __dangerouslyDisableSanitizers: ['innerHTML']
},

效果如下，尝试了多种不同的方式。无法按预期内联

  !function(e,n,t,a,c,s,d){n.className+=" "+t,s.start=1*new Date,s.end=d=function(){n.className=n.className.replace(RegExp(" ?"+t),"")},(e[a]=e[a]||[]).hide=s,setTimeout(function(){d(),s.end=null},500),s.timeout=500}(window,document.documentElement,"async-hide","dataLayer",0,{"GTM-XXXXXX":!0})

应该

(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;})(window,document.documentElement,'async-hide','dataLayer', 500 , 'GTM-XXXXXX'': true }
        )})

在页面中，我设置标题如下：

...
<script>
export default {
  head() {
    return {
      title: this.post.name
    }
  }
}
</script>

如何在另一个组件中获取这些数据？

我尝试过，this.$metaInfo但我需要获取数据的组件位于外部布局中<nuxt />...
另外，如果当前路由位于填充了头部的子页面中，则它将覆盖父标题。那么，我该怎么办呢？

我有一个 Vue.js 应用程序，当链接在社交媒体（主要是 Facebook）上共享时，我想使用 Open Graph Meta Tags 来显示一些内容（标题、描述、图像）。

我使用 vue-meta 在我使用标题模板的地方显示标题，并且该部分运行良好（除了一个问题，解决后可能会解决）。

metaInfo () {
return {
  titleTemplate: this.item.title + ' | %s',
  meta: [
    {property: 'og:title', content: ' | My Site'},
    {property: 'og:site_name', content: 'My Site'},
    // The list of types is available here: http://ogp.me/#types
    {property: 'og:type', content: 'website'},
    // Should the the same as your canonical link, see below.
    {property: 'og:url', content: 'https://www.my-site.com/my-special-page'},
    {property: 'og:image', content: 'https://www.my-site.com/my-special-image.jpg'},
    // Often the same as your meta description, but not always. …

我开发了一个 Vue 应用程序，每个页面上都有导航和内容。我需要的是为 Twitter 和 Facebook 卡的每个不同页面设置元标记。为此，我使用 vue-meta 库，并提出了以下代码：

metaInfo() {
  return {
    meta: [
      {
        property: 'og:title',
        content: `Card #${this.card_no ? this.card_no : ''}`,
        vmid: 'og:title'
      },
      {
        property: 'og:image',
        content: `${this.card ? this.card.participantA.image : ''}`,
        vmid: 'og:image'
      },
      {
        property: 'og:description',
        content: `${this.card ? this.card.description : ''}`,
        vmid: 'og:description'
      },
      {
        property: 'twitter:title',
        content: `Card #${this.card_no ? this.card_no : ''}`,
        vmid: 'twitter:title'
      },
      {
        property: 'twitter:image',
        content: `${this.card ? this.card.participantA.image : ''}`,
        vmid: 'twitter:image'
      },
      {
        property: 'twitter:description', …

安装 vue-meta 后，我的浏览器控制台出现错误。

为什么会出现这个错误？是我的代码造成的还是bug？我正在使用vue-meta@2.4.0Vue 3。

main.js

createApp(App)
  .use(router)
  .use(VueMeta)
  .mount("#app");

应用程序.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import Header from "./components/Header.vue";

export default {
  components: {
    "app-header": Header,
  },
};
</script>

首页.vue

export default {
  name: "Home",
  metaInfo() {
    return {
      title: "test meta data with vue",
      meta: [
        {
          vmid: "description",
          name: "description",
          content:
            "hello world, this is an example of adding a description with vueMeta",
        },
      ],
    };
  },
};

我正在尝试使用组合 API 获取 useMeta 的动态标题，但它不起作用。

<script setup>
import { computed } from 'vue'
import { POST } from '@/constants/blog'
import { useQuery, useResult } from "@vue/apollo-composable";
import { useRoute } from 'vue-router'
import { useMeta } from "vue-meta";

  const route = useRoute();
  const variables = computed(() => ({
    slug: route.params.slug,
  }));
  const { result, loading, error } = useQuery(
    POST, variables
  );
  const post = useResult(result, null, data => data.post.data );
  const metaTitle = computed(() => ({
    title: post.attributes.title,
  })); …

使用文件nuxt.config.js文件,head可以自定义内容以添加一些元或其他内容:

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'awesome title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  ...
}

但我在文档中找不到任何设置html元素属性的东西- 我想设置lang属性.有没有办法做到这一点？