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

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

我已经设置了一个Nuxt/Vue站点，该站点有一个登录页，

/items/index.Vue

，它提供了一个项目网格，并且在我的

router.js

文件中将子路由设置为该登录页的子路由。这些子路由通过

nuxt子路由

或

路由器视图

组件在

/items/index.vue

中呈现为模态。子路由调用名为

/components/ItemsModal.vue

的组件，该组件设置适当的元标记（title、og:data等）

当我输入子路由的URL时，在父级

/items/index.vue

元信息初始闪烁后，元/头信息会按预期更新。但是，我的SEO信息显示的是父元/头信息，而不是由子路由组件定义的更新信息。当我查看source时，我看到预呈现的交付页面确实包含父级信息，而不是子路由信息，也没有与子路由组件关联的任何内容

是否有人有过将子管线配置为使用子管线组件中定义的头部信息进行预渲染的经验？我希望子路由在预渲染时调用它之前渲染它的关联组件

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

路由器.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>

<template lang='pug'>
  ThePage
    Item
</template>

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

页面
项目网格
第二个孩子
从“~/components/ItemGrid”导入ItemGrid
导出默认值{
组成部分：{
项目网格
}
总目（）{
返回{
标题：'父标题，
元：[{
hid：“描述”，
名称：'说明'，
内容：“父描述”
}]
}
}

/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>

<template lang='pug'>
  ThePage
    Item
</template>

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

页面
项目
从“~/components/Item”导入项目
导出默认值{
组成部分：{
项目
}
总目（）{
返回{
标题：'儿童标题，
元：[{
hid：“描述”，
名称：'说明'，
内容：“子描述”
}]
}
}

我忘了提到我使用了

vue portal

在DOM中提升模式，并通过更全面的阅读发现。SSR和vue portal不兼容

我最后做的是绕过SSR上的

vue门户

，只使用

nuxt child

加载模式，然后在挂载时触发

vue门户

实现。SSR元联系人通过nuxt child正确处理，UX在客户端正确挂载