Question

我在页面中进行了以下设置

/pages/index.vue
/pages/_blog
/pages/_blog/index.vue
/pages/_portfolio/
/pages/_portfolio/index.vue

博客和投资组合是动态的，因为CMS用户应该能够对其进行更改，例如将投资组合制作为myportfolio

所以我按如下所示链接nuxt

<nuxt-link :to="{name: portfolio, params: {portfolio: 'myportfolio'}">portfolio</nuxt-link>

到目前为止一切顺利！单击链接时，您将转到投资组合，它将使用页面投资组合组件。

但是，当我刷新/重新加载时。我将获得页面博客组件。因此，在重新加载参数时不会传递参数，因此它不知道应该使用哪个页面组件。在这种情况下，我想它首先要找到博客组件。

我找不到任何有关如何处理此问题的文档。如果结构将是更简单的示例

/pages/index.vue
/pages/blog/index.vue
/page/portfolio/_slug.vue

然后它更简单。由于参数将是一个the弹，并且始终是组件。但就我而言，子根组件已经是动态的。

所以我的问题。如何使NUXT了解在http://localhost:3000/myportfolio/的情况下应使用组件组合。我可以从Wagtail api中确定页面，子弹，id等的类型。因此这应该不会造成问题。但是要做到这一点，我首先需要拥有正确的组件。

提前寻求帮助！

Answer 1

您将需要使用unknown dynamic nested routes，甚至可能需要使用nuxt-child组件。

/pages/index.vue
/pages/_.vue

注意：现在处理404页取决于_.vue页的逻辑。

现在，_。vue组件将处理尚未处理的任何路由。

这将需要_.vue中的某些处理逻辑才能正确切换页面。我强烈建议您查看this示例，该示例涉及在页面组件中使用nuxt-child。

实现此行为的另一种方法是使用Vue的dynamic components。例如，像这样的事情可能起作用：

~/pages/_.vue

<template>
  <component :is="component" :data="component_data" />
</template>
<script>
import Portfolio from '~/components/Portfolio'
import Blog from '~/components/Blog'

export default {
  computed: {
    component() {
      switch(this.component_name) {
        case 'portfolio':
          return Portfolio
        case 'blog':
          return Blog
      }
    }
  },
  async asyncData({ route }) {
    // accessing /myportfolio/portfolio will result in
    // route.params.pathMatch to equal /myportfolio/portfolio
    // which can be used to fetch API data
    return {
      component_name: 'portfolio',
      component_data: 'fetched_from_api'
    }
  }
}
</script>

我在这里省略了很多细节，但是基本前提是使用_.vue作为全部内容，获取API数据并动态确定组件，然后渲染该组件。

我建议您通读我发布的链接，并尝试使用它们，以了解适用于您的用例的内容，并在不起作用时使用更具体的信息进行更新。

Nuxt路由器使用名为params的nuxt-link重新加载/刷新

1 个答案: