Question

在页面中，我这样设置标题：

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

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

我尝试使用this.$metaInfo，但是我需要获取数据的组件位于<nuxt />之外的布局中...
另外，如果当前路线位于带有填充标题的子页面中，则它会覆盖父标题。那么，我该怎么办？

Answer 1

this.$metaInfo只能在页面组件中访问。如果您想在任何地方使用当前页面的标题，我认为最好的方法是使用store保存当前标题，然后在任何组件中轻松检索此信息。

在 store / index.js

export const state = {
  title: 'Default Title'
}

export const mutations = {
  SET_TITLE (state, title) {
    state.title= title
  }
}

然后在页面组件

上使用它

<template>
  <div></div>
</template>

<script>
export default {
  head () {
    return {
      title: this.title
    }
  },
  mounted () {
    this.$store.commit('SET_TITLE', this.$metaInfo.title)
  }
}
</script>

现在，您可以在要从存储状态检索它的任何组件中访问当前标题。

<template>
  <div></div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      title: state => state.title
    })
  }
}
</script>

Answer 2

您可以沿着组件树向上走，直到到达页面组件

"android": {
    "softwareKeyboardLayoutMode": "pan",
    ...(other properties)
}

如何使用nuxt访问组件中的HEAD数据？

2 个答案: