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