Dynami c Выбор страницы Nuxt - PullRequest
Новая
       6

Dynami c Выбор страницы Nuxt

3 голосов
/ 24 марта 2020

В основном я пытаюсь либо динамически выбрать компонент для соответствующего маршрута, либо выполнить внутреннюю перезапись, чтобы я мог выбрать другой маршрут без изменения URL.

Мое решение прямо сейчас: у меня есть URL из внешний ресурс, который я хочу сопоставить, я ловлю их с помощью подстановочной страницы в Nuxt, используя _.js. В промежуточном программном обеспечении на этой странице я определю фактический тип страницы (cmspage, productdetail, et c.) И поместу результат в магазин. Затем я бы проверил, найдены ли данные в функции проверки, чтобы я мог вернуть 404, если это необходимо. В случае успеха, будет использовать функцию рендеринга для рендеринга components/pages/cms.vue или любого типа страницы.

Так что это должно работать (все еще требуется большая часть реализации), но у него есть проблема, которую я могу ' я не могу использовать множество функций Nuxt (middleware, asyncData, fetch, validate, more?), доступных для страниц, и это именно то, чего я пытаюсь достичь.

Это расширение конфигурации 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')
          }
        }
      })
    }
  }
}

Ответы [ 2 ]

3 голосов
/ 26 марта 2020

Я не совсем уверен, правильно ли я понял вопрос, но я предполагаю, что:

  • Вам нужен один единственный путь (маршрут) для отображения разных (динамических c) представлений
  • Перед загрузкой маршрута вы хотите получить тип страницы (возможно, из бэкэнда)
  • Вы не хотите, чтобы эти компоненты загружались в ваше приложение, если они не соответствуют маршруту

Так что если это то, что вы хотите, следуйте ниже:

  • Внутри маршрутов вам нужно что-то вроде этого: 

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.

  • Затем создайте компонент Dynami c, который должен загружать различные компоненты 
<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 пример

0 голосов
/ 30 марта 2020

Я не совсем уверен, правильно ли я понял вопрос, но я предполагаю, что:

Вы хотите, чтобы страница загружалась динамически, исходя из некоторых условий.

У меня есть это решение. 

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)
      },
    }
  ]
});
...