children 路由的元标记问题，通过 router-view 呈现，未在服务器端设置

Question

TLDR：child-routes 的 Pre-rendered 视图正在使用 parent 元信息，但我希望它们使用 child-route 组件上定义的元信息.

我已经设置了一个 Nuxt/Vue 站点，它有一个登陆页面，/items/index.vue 提供了一个项目网格，child-routes 设置为 child ren 到我的 router.js 文件中的登录页面。这些 child-routes 通过 nuxt-child 或 router-view 组件在 /items/index.vue 中呈现为模式。 child-route 调用一个名为 /components/ItemsModal.vue 的组件，该组件设置适当的元标记（标题、og:data、等）

当我为 child 路线输入 URL 时，meta/head 信息在 parent /items/index.vue 初始闪烁后按预期更新元信息。但是，我的 SEO 信息显示 parent meta/head 信息，而不是 child-route 组件定义的更新信息。当我 view-source 时，我看到 pre-rendered 传送的页面确实有 parent 信息，而不是 child-route 信息，也没有任何与 [=] 相关的内容47=]组件。

有人有过配置 child 路由到 pre-render 的经验吗？我希望 child-route 在 pre-render.

上调用它之前渲染其关联的组件

下面的代码，truncated/modified 为清楚起见。

router.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>

/item/index.js

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

Answer 1

我忘了提到我正在使用 vue-portal 在 DOM 中提升模态，并且通过更全面地阅读 the documentation 发现了这一点。 SSR 和 Vue-Portal 不兼容。

我最终做的是绕过 SSR 上的 vue-portal，仅使用 nuxt-child 加载模态，然后在挂载上触发 vue-portal 实现。通过nuxt-child正确处理了SSR meta contact，并且在客户端挂载了正确的UX。

children 路由的元标记问题，通过 router-view 呈现，未在服务器端设置

Issue with meta tags for children routes, rendered via router-view, not being set on server side

vuejs2

nuxt.js

vue-router

vue-meta