动态 Nuxt 页面选择

Question

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

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

所以这应该可以工作（仍然需要大部分实现）但是它有一个问题是我不能使用很多可用的 Nuxt 功能（中间件、asyncData、获取、验证等等？）这正是我想要实现的页面。

这个 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 prop 定义的。

我发了CodeSandbox example

Answer 2

我不确定我的问题是否正确，但我认为：

您希望根据某些条件动态加载页面。

我有这个解决方案。

import Vue from "vue";
import VueRouter from "vue-router";
import HomePage from "./components/HomePage";

Vue.use(VueRouter);

function getRandomPage() {
  const pageTypes = ["ProductList", "Cms", "ProductDetail"];
  let min = 0;
  let max = 2;
  min = Math.ceil(min);
  max = Math.floor(max);
  const random = Math.floor(Math.random() * (max - min + 1)) + min;
  return pageTypes[random];
}

let pageType = null;

function getPageType() {
  return new Promise(res => setTimeout(res(getRandomPage()), 1500));
}

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      component: HomePage
    },

    {
      path: "/dynamic-page",
      component: () => {
        let page = "ProductListPage.vue"
        getPageType().then(type => {
          pageType = type;
          console.log(pageType)
          if (pageType === "ProductList") {
            page = "ProductListPage.vue";
          } else if (pageType === "Cms") {
            page = "CmsPage.vue";
          } else {
            page = "ProductDetailPage.vue";
          }
        })

        return import("./dynamic-pages/" + page)
      },
    }
  ]
});

Answer 3

我遇到了同样的问题，我在 github 上找到了这个 PR：https://github.com/nuxt/nuxt.js/pull/7754

解决方案是这样的：

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

已在 v2.14.0 中合并，在我的项目中运行良好！