nuxt.js 获取 vue.js 组件中的默认磁头

Question

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

我知道您可以在 vue 组件中使用标题 function 更改页面标题。 但是也有可能以某种方式检索这些信息吗？

<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 编写网站代码:)

Answer 1

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

例子：

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

Answer 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 。 有没有人找到更好的解决方案？ :)