动态 Nuxt 页面选择

Question

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

我现在的解决方案：我有一个来自我想要匹配的外部资源的 url，我在 Nuxt 中使用_.js. 在此页面上的中间件中，我将确定页面的实际类型（cmspage、productdetail 等）并将结果放入商店。然后我会检查是否在验证函数中找到了数据，以便在需要时返回 404。如果成功，则将使用渲染函数来渲染components/pages/cms.vue或任何类型的页面。

所以这应该可以工作（仍然需要大部分实现）但它的问题是我不能使用很多可用于页面的 Nuxt 功能（中间件、asyncData、fetch、validate 等等？）正在努力实现。

这个 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 个组件。这是由pageTypeprop 定义的。

我做了一个CodeSandbox 示例