0

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

我已经设置了一个 Nuxt/Vue 站点，该站点具有一个登录页面，它提供了一个项目网格，并且在我的文件/items/index.vue中将子路由设置为该登录页面的子级。router.js这些子路由在/items/index.vuevianuxt-child或router-view组件中呈现为模式。子路由调用一个名为的组件，该组件/components/ItemsModal.vue设置适当的元标记（标题、OG：数据等）

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

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

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

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

1 回答 1

0

我没有提到我vue-portal用来在 DOM 中提升模态，并通过更全面地阅读文档发现。SSR 和 Vue-Portal 不兼容。

我最终做的是绕过vue-portalSSR，只是nuxt-child用来加载模态，然后触发vue-portalmounted的实现。SSR 元联系人通过 nuxt-child 正确处理，并且 UX 正确安装在客户端。

于 2020-10-22T15:38:07.380 回答