未通过服务器端设置的通过路由器视图呈现的子路由的元标记存在问题

问题描述

TLDR：子路径的预渲染视图正在使用父级元信息，但我希望它们使用在子路径组件上定义的元信息。

我已经建立了一个Nuxt / Vue网站，该网站有一个着陆页，/items/index.vue提供了一个项目网格，并且在我的{{1}中，将子路线设置为该着陆页的子路线}文件。这些子路线通过router.js或/items/index.vue组件在nuxt-child中呈现为模态。子路由会调用名为router-view的组件，该组件会设置适当的元标记（标题，og：data等）

当我输入子路线的URL时，在初次刷新父/components/ItemsModal.vue元信息之后，元/头信息会按预期更新。但是，我的SEO信息显示的是父元/头信息，而不是子路由组件所定义的更新信息。在查看源代码时，我看到预渲染的交付页面确实具有父信息，而不是子路由信息，也没有与子路由组件关联的任何内容。

任何人都有配置子路径以使用子路径组件中定义的头部信息进行预渲染的经验吗？我希望子路径先渲染其关联的组件，然后再在预渲染中调用它。

下面的代码，为清楚起见，已被截断/修改。

router.js

/items/index.vue

/item/index.js

{
    path: '/items',name: 'item-index',component: ItemIndex,children: [
      {
        path: ':slug',component: Itemmodal,// defined as a var earlier in file
        name: 'item-modal'
      }
    ],alias: []
  },

/item/index.js

<template lang='pug'>
  ThePage
    ItemGrid
    nuxt-child
</template>

<script>
import ItemGrid from '~/components/ItemGrid'
export default {
components: {
  ItemGrid
}
head() {
  return {
    title: 'Parent Title,Meta: [{
         hid: 'description',name: 'description',content: 'Parent description'
    }]
  }
}
</script>

解决方法

我忽略了提及我正在使用vue-portal在DOM中提升模式，并通过更完整地阅读the documentation而发现了它。 SSR和Vue-Portal不兼容。

我最终要做的是绕过SSR上的vue-portal，仅使用nuxt-child来加载模态，然后触发已安装的vue-portal实现。通过nuxt-child可正确处理SSR元联系人，而将UX正确安装在客户端即可。