动态组件选择

Question

bounty到期在7天内。该问题的答案有资格获得+ 100声望赏金。red-X希望引起更多关注对此问题：

寻找是否有一种“官方” /健壮的方式来实现这一目标，而不是一种会通过补丁更新破坏Nuxt的hacky解决方案。

基本上，我试图为匹配的路由动态选择一个组件，或者进行内部重写，以便我可以选择其他路由而不更改url。

我现在的解决方案：我的网址来自我想匹配的外部资源，我在[x]中使用_.js在Nuxt中使用通配符页面捕获了这些网址。在此页面上的中间件中，我将确定页面的实际类型（cmspage，productdetail等），并将结果放入商店中。然后，我将检查是否在validate函数中找到了数据，以便在需要时可以返回404。如果成功，则将使用render函数来渲染components/pages/cms.vue或任何类型的页面。

所以这应该可以工作（仍然需要大部分实现），但是它的问题是我不能使用很多Nuxt功能（中间件，asyncData，fetch，验证等等），这些功能可用于页面。我想要达到的目标。

此nuxt配置扩展名不起作用，但将是完美的：

{
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '*',
        component: async () => {
          const pageType = 'pdp' // await getPageType()
          switch (pageType) {
            case 'cms':
              return resolve(__dirname, 'pages/cmsPage.vue')
            case 'pdp':
              return resolve(__dirname, 'pages/productDetailPage.vue')
            case 'plp':
              return resolve(__dirname, 'pages/productListPage.vue')
          }
        }
      })
    }
  }
}

Answer 1

我不确定是否能正确回答问题，但我认为：

• 您想要一个路径（路径）来显示不同的（动态）视图
• 在加载路由之前，您要获取页面类型（可能是从后端获取的）
• 如果这些组件与路由不匹配，您不希望将这些组件加载到您的应用程序中

因此，如果您要这样做，请按照以下步骤进行：

---

• 在内部路线中，您需要这样的东西：

let pageType = null;

export default new VueRouter({
  mode: "history",
  routes: [
    //... other routes
    {
      path: "/dynamic-page",
      component: () => import("./components/DynamicPage"),
      props: router => ({ pageType }),
      beforeEnter(to, from, next) {
        // getPageType() is supposed as a async method getting the page type
        getPageType().then(type => {
          pageType = type;
          next();
        });
      }
    }
  ]
});

因此，使用上面的代码，我们获取了pageType并将其作为prop传递给组件。

• 下一步，创建应该加载不同组件的动态组件

<template>
  <div class="dynamic-page">
    <component :is="pageType"/>
  </div>
</template>

<script>
export default {
  props: {
    pageType: String
  },

  components: {
    ProductList: () => import("../dynamic-pages/ProductListPage"),
    Cms: () => import("../dynamic-pages/CmsPage"),
    ProductDetail: () => import("../dynamic-pages/ProductDetailPage")
  }
};
</script>

因此使用延迟加载的组件将仅加载1个组件。这是由pageType属性定义的。

我做了一个CodeSandbox example