时间戳

首页 > 解决方案 > Nuxt.js 为同一路由加载不同的组件或页面

vue.js - Nuxt.js 为同一路由加载不同的组件或页面

问题描述

背景：
我有一个自定义构建 CMS，其中包含用于页面、发布/博客、产品、购物车等的内置模块。管理员能够创建任意数量的页面、博客或产品类别、子类别......

前端需要现代化，所以我们决定使用 Nuxt.js，因为我们还需要服务器端渲染支持来实现电子商务 SEO 的目的。

问题：
可能有一个路由 /blog/ 只是一个简单的 cms 页面。但是管理员也可以创建具有相同 url 的发布类别（在这种情况下，此 URL/发布模块具有优先权）。基于该 URL，我需要加载不同的 Nuxt 页面或组件。

我需要能够根据同一个 URL 确定要调用哪个 API。每个 cms 模块都有单独的 api 端点。

例如：
页面 /api/pages/?slug=blog
发布 /api/publish/?category=blog&per_page=10

已解决问题的真实示例：
简单的 CMS 页面：https
://www.sprintersports.com/empresa 类别页面：https ://www.sprintersports.com/tienda-running

没有 /products 或 /category 前缀来标识第二页需要获取不同的 Nuxt 组件。类别理论上也可以只是一个简单的页面

我试过的：

  1. 第一个想法是为每个路由调用发布 api。如果没有结果，请尝试 pages api。

  2. 如果存在具有相同 url/slug 的类别，则保存所有发布类别以存储并在每个路由 chage 上进行比较。如果没有，请调用 pages API

这行得通，但从性能的角度来看，这对我来说听起来不合适。

有没有类似的经验或解决办法？

我尝试使用 nuxt/vue+wordpress 找到解决方案或示例，因为可能存在类似问题。但到目前为止还没有运气。

标签： vue.jsroutesnuxt.js

解决方案

推荐阅读