web-dev-qa-db-ja.com

動的Nuxtページ選択

基本的に、一致したルートのコンポーネントを動的に選択するか、内部的に書き換えて、URLを変更せずに別のルートを選択できるようにしています。

私の現在の解決策：一致させたい外部リソースのURLがあります。_.jsを使用して、Nuxtのワイルドカードページでこれらをキャッチしています。このページのミドルウェアで、ページの実際のタイプ（cmspage、productdetailなど）を決定し、結果をストアに配置します。次に、データが検証関数で見つかったかどうかを確認し、必要に応じて404を返すことができるようにします。成功した場合、render関数を使用してcomponents/pages/cms.vueまたは任意のタイプのページをレンダリングします。

だからこれはうまくいくはずです（まだほとんどの実装が必要です）これには、まさに私が達成しようとしていることです。

この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')
          }
        }
      })
    }
  }
}
javascriptvue.jsvue-routernuxt.js
4
red-X

質問が正しいかどうかは完全にはわかりませんが、次のことを前提としています。

いくつかの条件に基づいて動的にページをロードしたい。

私はこの解決策を持っています。

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)
      },
    }
  ]
});
0
Patel Pratik