Is it possible in Nuxt.js to have multiple route parameters with same level hierarchy?
For instance:
- entry
-- _id.vue
-- _slug.vue
- index.js
No, it's not possible.
But you can use a simple workaround.
Case 1
You need both _id and _slug in the same route. Then you can simply nest them. So that your route will look like this: entry/_id/_slug. And your files would look like this:
entry/
--| _id/
-----| index.vue //this one is for _id
-----| _slug/
--------| index.vue //this one is for _slug
Also you can swap _id with _slug if it fits your needs better.
Case 2
You need two different routes: entry/id/_id and entry/slug/_slug. In this case your files would look like this:
entry/
--| id/
-----| _id.vue
--| slug/
-----| _slug.vue
Related
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'),
});
},
How do I use routing and folder structure to pass multiple optional parameters in the URL?
What folder structure should I create to handle such cases where the route is something like
user/:id/:product
user/:id/product/:id
You need to create dynamic nested routes. In order to do that you need to manage your folders as indicated in the documentation here.
For your example it should be :
// For user/:id/:product
user/_id/_product
pages/
--| user/
-----| _id/
--------| index.vue
--------| _product
-----------| index.vue
// For user/:id/product/:id
pages/
--| user/
-----| _id/
--------| index.vue
--------| product
-----------| _id.vue
Suppose I want to make a blog.
in /pages/ I would add
pages/
-- blog/
--+-- _artcile.vue
--+-- index.vue
-- blog.vue
which would let me have a route /blog and /blog/:article?. Most such examples I have found in these cases, (e.g. in the Nuxt docs for user and user_id) the content which is being requests is standard (e.g. user id or markdown file for the blog). But what if I want each entry to be a unique component? e.g.
pages/
-- blog/
--+-- custom_article_1.vue
--+-- custom_article_2.vue
--+-- index.vue
-- blog.vue
You could just create _artcile.vue and inside it determine yourself what component you want using :is. Docs
<component v-bind:is="currentTabComponent"></component>
I am using Nuxt to create my application and I have a group of pages that are related in a way.
So I will simplify things a bit but my current structure looks like this
/pages
/login
/registration
/forgot-password
/resend-confirmation-email
.
.
.
This folder structure is creating /login, /registration, /forgot-password, /resend-confirmation-email routes, which is cool.
So, in a way I can group first four pages to a group and name it authorization.
Ideally new folder structure should look like
/pages
/authorization
/login
/registration
/forgot-password
/resend-confirmation-email
.
.
.
However what I would like is for the router to not get messed up, I would very much like for those routes to remain the way they were.
Is that possible?
So with no plugins and stuff, what I did was replacing the folder name from route object in extend routes function.
File nuxt.config.js
router: {
extendRoutes(nuxtRoutes) {
nuxtRoutes.map(route => {
route.path = route.path.replace('/authorization', '');
route.name = route.name.replace('authorization-', '');
return route;
});
},
....
}
This looks like a hack to me, but it actually does exactly what I want. For some larger projects I might consider fully overriding the router but this is kinda okay for now.
You can use nuxt router extras module
https://github.com/alibaba-aero/nuxt-router-extras/blob/dev/README.md
<router>
path: /posts
</router>
I have an issues with nuxtjs route naming.
Ex: my pages folder is
page:
-|blog:
-|_categorySlug.vue
-|_postSlug.html.vue
-|service:
-|index.vue
When i access url like
example.com/blog/demo-post-slug.html -> route map to /blog/_categorySlug.vue
example.com/blog/demo-category-slug -> route map to /blog/_categorySlug.vue
Because _categorySlug.vue place in the first order inside dir blog.
When i change the file name _postSlug.html.vue to _aPostSlug.html.vue to make it become the first order.
page:
-|blog:
-|_aPostSlug.html.vue
-|_categorySlug.vue
-|service:
-|index.vue
It's all right but the file naming isn't good. Anyone can give me an suggestion for this?
Thanks!