How to implement dynamic tabs in nuxt using routing?

  • 0
    Hello everyone, I started to study nuxt js, I decided to create a test online store on it.

    I have a page for a specific product that has tabs.
    These tabs should work together with vue-router to be convenient for users (you can drop a link to certain content)

    My implementation of tabs like this:
    in the pages directory _id directory (for product)
    in the _id directory, files like _route.vue (for tabs)
    transitions to tabs I do by clicking on a and push in $ router
    It should look something like this localhost: 3000 / goods / 1 / tab-name
    And it works BUT

    I ran into the problem that I have several tabs that display the same content, although they should be different.
    these tabs start with R. Is this the problem?

    I think exact should be added.
    But how, that would leave everything as it is?

    I tried to use nuxt-link, but how to pass the path to to with the id saved? to = `$ {item.id} / tab-name` doesn't work.

    Or maybe what am I doing - a crutch and there is a better solution?

    Thank you for your time)))
    JavaScript Reece Williamson, Apr 3, 2019

  • 1 Answers
  • 0
    solved a problem.

    In the _id directory

    it was necessary to set routes not via _route.vue, but simply route.vue and everything began to work well.



    I'll leave the question open a little more, maybe someone will suggest a more convenient solution, just now there is a drawback that the page is loading, it's not long, but noticeable, especially if you take into account the load (if the store was in production)



    Inspired by restore store.

    https://www.re-store.ru/catalog/MWHM2RU-A/ spec /

    They have the same tabs, but only the tab component is updated, how to implement this? Code-splitting? (xs like theirs, there is bitrix)
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!