mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-10 01:12:37 +00:00
Fixed #536 - Menu components with web router refresh the whole page
This commit is contained in:
parent
9572a804d5
commit
3f2b51a487
10 changed files with 114 additions and 69 deletions
|
@ -2,10 +2,11 @@
|
|||
<ul class="p-submenu-list" role="tree">
|
||||
<template v-for="(item, i) of model">
|
||||
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i">
|
||||
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click="onItemClick($event, item)"
|
||||
role="treeitem" :aria-expanded="isActive(item)">
|
||||
<span :class="['p-menuitem-icon', item.icon]"></span>
|
||||
<span class="p-menuitem-text">{{item.label}}</span>
|
||||
<router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
|
||||
<a :href="href" :class="getLinkClass(item)" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
|
||||
<span :class="['p-menuitem-icon', item.icon]"></span>
|
||||
<span class="p-menuitem-text">{{item.label}}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)"
|
||||
role="treeitem" :aria-expanded="isActive(item)" :tabindex="item.disabled ? null : '0'">
|
||||
|
@ -39,16 +40,12 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
onItemClick($event, item) {
|
||||
onItemClick($event, item, navigate) {
|
||||
if (item.disabled) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!item.url && !item.to) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (item.command) {
|
||||
item.command({
|
||||
originalEvent: event,
|
||||
|
@ -60,6 +57,10 @@ export default {
|
|||
this.activeItem = null;
|
||||
else
|
||||
this.activeItem = item;
|
||||
|
||||
if (item.to && navigate) {
|
||||
navigate(event);
|
||||
}
|
||||
},
|
||||
getItemClass(item) {
|
||||
return ['p-menuitem', item.className];
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue