如何在 Nuxt js 中为复杂的 Urls 编写动态页面？

Question

我用一页来显示类别和子类别的详细信息。我不使用 router.js 来覆盖它，我想使用 nuxt 动态页面来解决这个问题。

url: "/news/afghanistan-81291"

url:"/gallery/technology/apple-revenue-81260"

url:"/world/economy/turkey-economy-81260"

我的本地主机 url 应该看起来像 (page-name/category/:subcategory?)

http://localhost:3000/detail/news/afghanistan-81291

http://localhost:3000/detail/gallery/technology/apple-revenue-81265

http://localhost:3000/detail/world/economy/turkey-economy-81240

在 .nuxt 路由器 js 中

{
  path: "/detail", 
  name: "detail",
  children: [{
    path: "category/:subcategory", 
    name: "detail-category-subcategory"
  },
  ...
}

这看起来不是一个好的做法，我需要最佳做法。

Answer 1

您可以在页面内部使用这种结构

- detail
-- - news
-- -- - _slug.vue
-- -- gallery
-- -- -- _tech
-- -- -- -- _slug.vue
-- -- world
-- -- -- _category
-- -- -- -- _slug.vue

您不需要离开您的页面并且可以在一个地方处理所有事情（并且靠近您的代码）。

文档中的更多上下文 available here。

这里 another answer 介绍了如何在保持 .vue 组件的同时保持灵活性。

Answer 2

extendroutes 解决了这个问题

  extendRoutes(routes, resolve) {
    routes.push({
      name: 'detailed-category',
      path: '/detail/:categoryType/:subCategoryType?/:title',
      component: resolve('pages/detail.vue'),
    });
  },

如何在 Nuxt js 中为复杂的 Urls 编写动态页面？

How to write Dynamic Pages for complex Urls in Nuxt js?

vue.js

vue-router

nuxt.js