nuxt.js 在 vue.js 组件中获取默认头部答案

【问题标题】：nuxt.js get default head in vue.js componentnuxt.js 在 vue.js 组件中获取默认头部
【发布时间】：2020-07-31 19:59:03
【问题描述】：

我正在尝试在 vue 布局中获取由 nuxt.config.js 配置的 head 对象。为了在应用栏中显示与页面标题相同的标题。

我知道您可以在 vue 组件中使用 head 函数更改页面标题。但是是否也可以通过某种方式检索这些信息？

<script>
export default {
  data () {
    return {
      title: head.titleTemplate // possible?
    }
  },
  head () {
      // here it is possible to change it but how about getting it?
  }
}
</script>

另一种方法是从 nuxt.config.js 的页面中获取一些数据。但我认为这不是层次结构的结构。

感谢您的帮助，我刚刚开始使用 javascript 编写网站代码 :)

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

（如果我理解正确）您可以使用更改后的回调来跟踪使用的最新元信息（以及标题）。

例子：

head() {
  return {
   changed: (info) => {
     this.title = info.title;
     console.log(info, info.title);
    },
  };
},
data() {
  return {
    title: '',
  };
},

【讨论】：

回调似乎没有被调用，因为我没有得到任何控制台日志，标题也没有改变。

【解决方案2】：

在导出之前的nuxt.config.js 中，我使用标题字符串设置了变量。然后将其添加到head 部分并创建一个新的env 部分： https://nuxtjs.org/api/configuration-env/

const title = `Site title`
export default {
    head: {
        title
    },
    env: {
        title
    }
}

这就是我在任何 Vue 组件中获得标题的方式：

export default {
  computed: {
    title () {
      return process.env.title
    }
  },
}

这有助于您将原始标题保留在 process.env.title，即使您想要动态更改 head.title。有没有人找到更好的解决方案？ :)

【讨论】：