0

I am wondering how to rename routes in nuxtjs.

In particular, I have a folder called products with an _id.vue and index.vue files. However, I do NOT want the route to be www.mysite.com/products/productID, but rather www.mysite.com/productID. That is to say, I want to remove products from the route.

Any idea how I can do this?

oussema sallemi
  • 13
  • 2

1 Answers1

1

Docks suggest that top-level dynamic routes will work fine. Check out the _slug folder in the example.

So, the following folder structure works:

pages
--| _product/
-----| index.vue

And in your index.vue you'll have access to product param via $route object (check this answer for more details), so, it can contain something like this:

<!-- pages/_product/index.vue -->
<template>
    <div class="flex items-center justify-center text-center py-20">
        {{ $route.params.product }}
    </div>
</template>

<script>
export default {}
</script>

I've tested this and it works. If having this set-up you'll go to www.mysite.com/shampoo/ you'll see shampoo appearing on the screen, if you'll go to www.mysite.com/r2-d2/ you'll see r2-d2 and so on.

Igor Bykov
  • 2,532
  • 3
  • 11
  • 19
  • yes i have a products folder under pages folder and in that products i have index and _product files...what i would like is to remove the /products from the url and leave only the productID so that the url is like this websie/productID instead of website/products/productID – oussema sallemi May 20 '20 at 22:16
  • @oussemasallemi I've updated the answer with more clear explanation & an example – Igor Bykov May 21 '20 at 07:28
  • am sorry i tried it but it didn't pan out thank you for taking the time to think about it – oussema sallemi May 21 '20 at 07:48
  • @oussemasallemi Thanks for such a polite feedback! :) I've took some time to test the structure I proposed and it works. I've updated the answer to illustrate better how it could be used. – Igor Bykov May 21 '20 at 08:46