Topic: Binding router to mdb-dropdown-item

Rogelio Sanchez free asked 4 years ago

How can I properly bind the internal vue router to a mdb-dropdown-item,


router-to properties are not working,

if I put href="/mylink" it works, but it reloads the whole page, I want to use the internal vue router.

Thanks in advance!

Magdalena Dembna staff answered 4 years ago

Hi, I've just realized that your problem is probably caused by MDB Vue version. A router-link functionality was introduced in MDB Vue 5.2.0, so in order to use it, you need to update your version. Kind regards, Magdalena

Rogelio Sanchez free commented 4 years ago

Thank you so much Miss Dembna, Upgrading did the job.

Magdalena Dembna staff commented 4 years ago

I'm glad we could help, good luck with your project. Best regards, Magdalena

Nirav Parekh free answered 4 years ago

Hi, I'm trying to give generate the link like


where {id} is dynamic.

My base url is: http:localhost:8080

I tried using following html

<mdb-dropdown-item :to="'profile/' + user.profile.user_id">Profile</mdb-dropdown-item>

When I'm in other page, it works fine. but when I'm in already in profile page, it generates link like this:


Magdalena Dembna staff commented 4 years ago

Have you tried using computed property for your link?

Rogelio Sanchez free answered 4 years ago

Yeah, sorry.these are my dropdown items

dropdown items

I tried to put router to="/" properties directly into the dropdown item,However it behaves like it had href="#", even If I put the "router" property.


I also tried to wrap dropdown items inside a router-link elemen and it workst, But it causes some strange margin or padding to the element.

enter image description here

Thanks a lot for your support.

Magdalena Dembna staff answered 4 years ago

Hi, Can you please provide a code snippet? I tested the code below and it seems to work fine, so I would be easier to find the source of the problem If you shared your example. Kind regards, Magdalena

    <mdb-dropdown-toggle color="default" slot="toggle">Basic dropdown</mdb-dropdown-toggle>
        <mdb-dropdown-item to="/some-path">Action</mdb-dropdown-item>

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.1.1
  • Device: Mac
  • Browser: Google Chrome
  • OS: macOs High Sierra
  • Provided sample code: No
  • Provided link: No