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

user_15112220 0
Viewed 334

I use one page to show details of categories and sub-categories. I do not use router.js to override it and I wanna use nuxt dynamic pages to solve this issue.

url: "/news/afghanistan-81291"

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

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

my localhost url should be look like (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

in .nuxt router js

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

this does not look like a good practice and I need best practice.

vue-router nuxt.js vue.js
2 Answers

You could use this kind of structure inside of your pages

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

You will not need to get out of your pages and could handle everything inside of a single place (and close to your code).

More context from the documentation available here.

Here is another answer on how to keep things flexible while still staying in your .vue components.

user_88165850

extendroutes solved this problem

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