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.
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.
extendroutes solved this problem
extendRoutes(routes, resolve) {
routes.push({
name: 'detailed-category',
path: '/detail/:categoryType/:subCategoryType?/:title',
component: resolve('pages/detail.vue'),
});
},