vue.js - 如何从中间件或插件设置 nuxtjs 标题和元？

Question

如何从 nuxt-middleware/nuxt-plugin 设置 NuxtJS 标题 % 元标记？

目前我正在从 nuxt.config.js 设置它，如下所示。

  head: () => {
    const now = Date.now()
    return {
      title: `config test : ${now}`,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description'
        }
      ]
    }
  },

请注意，我知道我可以在页面组件中进行类似设置。我不想在每个页面中设置标题功能，而是我想要一个可以使用路由器实例动态设置标题的公共位置。在路由器中间件或插件中。

Answer 1

您可以根据您所在的路线计算中间件中的头部信息。然后您可以将此数据存储在您的 vuex 中或将其作为道具传递给页面。在您的页面中，您可以在 asyncData 挂钩中获取此数据。头部整理的一个例子是：

export default function ({ store, route }) {

      const headInfoCollection = [
        { name: 'home', title: "Home" },
        { name: 'about', title: "About" }
      ]

      const headInfo = headInfo.find(c => c.name === route.name)
      
      store.dispatch('setHeadInfo', headInfo)

}