Menu components with web router refresh the whole page

[LadislavBohm]

I use Menubar component as my top level navigation bar but even when I use to property on my menu items clicking any of them still causes whole page to refresh.

I think the problem is that you are using @click event on like this:

<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" v-ripple
                    @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem">
                    <span :class="['p-menuitem-icon', item.icon]"></span>
                    <span class="p-menuitem-text">{{item.label}}</span>
</router-link>

After removing this @click handler it started to work properly. This happens on Vue 3 with vue-router version 4.0.0-beta.13.

[cagataycivici]

I'm unable to replicate, can you please also provide your menumodel?

[LadislavBohm]

Sure, I pass menu items from setup() method like this:

const menuItems = ref([
      {
        label: "Home",
        icon: "pi pi-home",
        to: "/"
      },
      {
        label: "Users",
        icon: "pi pi-users",
        to: "/users"
      },
      {
        label: "Reports",
        icon: "pi pi-print",
        to: "/reports"
      }
    ] as Array<MenuItem>);

and then use it in my template like this:

<Menubar class="p-shadow-2" :model="menuItems"></Menubar>

There is nothing else in my template or component. Router is setup in a standard way. Issue went away when I manually removed @click="onItemClick($event, item)" from in MenubarSub, probably because it did not call preventDefault in this case?

[LadislavBohm]

@cagataycivici I created repository that reproduces this bug. It's the simplest example I can think of with just two routes, this menubar and every time you click on it it refreshes whole page:
https://github.com/LadislavBohm/primevue-menubar-reload

I wasn't able to make primevue work in codesandbox. If you have it setup there it would be nice to share it so we can easily fork it and use it next time.

[cagataycivici]

I'll check, thank you.

[cagataycivici]

Resolved it for all menu components.

[DaveBruwer]

this behaviour is still present to this day.

[FamilyMan]

this behaviour is still present to this day.

You have to handle it yourself as shown here:

https://primevue.org/menubar/#router