Fixed #536 - Menu components with web router refresh the whole page

src/components/breadcrumb/BreadcrumbItem.vue

@@ -1,8 +1,10 @@
 <template>
     <li :class="containerClass" v-if="visible()">
-        <router-link v-if="item.to" :to="item.to" class="p-menuitem-link">
+        <router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href}">
+            <a :href="href" class="p-menuitem-link" @click="onClick($event, navigate)">
                 <span v-if="item.icon" :class="iconClass"></span>
                 <span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
+            </a>
         </router-link>
         <a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
             <span v-if="item.icon" :class="iconClass"></span>
@@ -17,13 +19,17 @@ export default {
         item: null
     },
     methods: {
-        onClick(event) {
+        onClick(event, navigate) {
             if (this.item.command) {
                 this.item.command({
                     originalEvent: event,
                     item: this.item
                 });
             }
+
+            if (this.item.to && navigate) {
+                navigate(event);
+            }
         },
         visible() {
             return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);

src/components/contextmenu/ContextMenuSub.vue

@@ -4,9 +4,11 @@
             <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"
                     @mouseenter="onItemMouseEnter($event, item)">
-                    <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click="onItemClick($event, item)" role="menuitem" v-ripple>
+                    <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                        <a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple role="menuitem">
                             <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)" v-ripple
                          :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="item.disabled ? null : '0'">
@@ -65,16 +67,12 @@ export default {
 
             this.activeItem = item;
         },
-        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,
@@ -82,9 +80,20 @@ export default {
                 });
             }
 
+            if (item.items) {
+                if (this.activeItem && item === this.activeItem)
+                    this.activeItem = null;
+                else
+                   this.activeItem = item;
+            }
+
             if (!item.items) {
                 this.onLeafClick();
             }
+
+            if (item.to && navigate) {
+                navigate(event);
+            }
         },
         onLeafClick() {
             this.activeItem = null;

src/components/megamenu/MegaMenu.vue

@@ -4,7 +4,13 @@
             <template v-for="(category,index) of model">
                 <li v-if="visible(category)" :key="category.label + '_' + index" :class="getCategoryClass(category)" :style="category.style"
                     @mouseenter="onCategoryMouseEnter($event, category)" role="none">
-                    <a :href="category.url" :class="getLinkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
+                    <router-link v-if="category.to && !category.disabled" :to="category.to" custom v-slot="{navigate, href}">
+                        <a :href="href" :class="getLinkClass(category)" @click="onCategoryClick($event, category, navigate)" @keydown="onCategoryKeydown($event, category)" role="menuitem" v-ripple>
+                            <span v-if="category.icon" :class="getCategoryIcon(category)"></span>
+                            <span class="p-menuitem-text">{{category.label}}</span>
+                        </a>
+                    </router-link>
+                    <a v-else :href="category.url" :class="getLinkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
                         role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="category.disabled ? null : '0'" v-ripple>
                         <span v-if="category.icon" :class="getCategoryIcon(category)"></span>
                         <span class="p-menuitem-text">{{category.label}}</span>
@@ -17,9 +23,11 @@
                                     <li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{submenu.label}}</li>
                                     <template v-for="(item, i) of submenu.items">
                                         <li role="none" :class="getSubmenuItemClass(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="onLeafClick($event, item)" role="menuitem" v-ripple>
+                                            <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                                                <a :href="href" :class="getLinkClass(item)" @click="onLeafClick($event, item, navigate)" role="menuitem" v-ripple>
                                                     <span v-if="item.icon" :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="onLeafClick($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
                                                 <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
@@ -67,16 +75,12 @@ export default {
         this.unbindDocumentClickListener();
     },
     methods: {
-        onLeafClick(event, item) {
+        onLeafClick(event, item, navigate) {
             if (item.disabled) {
                 event.preventDefault();
                 return;
             }
 
-            if (!item.url && !item.to) {
-                event.preventDefault();
-            }
-
             if (item.command) {
                 item.command({
                     originalEvent: event,
@@ -85,6 +89,10 @@ export default {
             }
 
             this.activeItem = null;
+
+            if (item.to && navigate) {
+                navigate(event);
+            }
         },
         onCategoryMouseEnter(event, category) {
             if (category.disabled) {
@@ -96,16 +104,12 @@ export default {
                 this.activeItem = category;
             }
         },
-        onCategoryClick(event, category) {
+        onCategoryClick(event, category, navigate) {
             if (category.disabled) {
                 event.preventDefault();
                 return;
             }
 
-            if (!category.url && !category.to) {
-                event.preventDefault();
-            }
-
             if (category.command) {
                 category.command({
                     originalEvent: event,
@@ -123,6 +127,10 @@ export default {
                     this.bindDocumentClickListener();
                 }
             }
+
+            if (category.to && navigate) {
+                navigate(event);
+            }
         },
         onCategoryKeydown(event, category) {
             let listItem = event.currentTarget.parentElement;

src/components/menu/Menu.vue

@@ -78,8 +78,12 @@ export default {
 
             if (item.command) {
                 item.command(event);
-                event.originalEvent.preventDefault();
             }
+
+            if (item.to && event.navigate) {
+                event.navigate(event.originalEvent);
+            }
+
             this.hide();
         },
         toggle(event) {

src/components/menu/Menuitem.vue

@@ -1,8 +1,10 @@
 <template>
     <li :class="containerClass" role="none" :style="item.style" v-if="visible()">
-        <router-link v-if="item.to && !item.disabled" :to="item.to" :class="linkClass" role="menuitem" v-ripple>
+        <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+            <a :href="href" @click="onClick($event, navigate)" :class="linkClass" v-ripple role="menuitem">
                 <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="linkClass" @click="onClick" :target="item.target" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
             <span :class="['p-menuitem-icon', item.icon]"></span>
@@ -20,10 +22,11 @@ export default {
         item: null
     },
     methods: {
-        onClick(event) {
+        onClick(event, navigate) {
             this.$emit('click', {
                 originalEvent: event,
-                item: this.item
+                item: this.item,
+                navigate: navigate
             });
         },
         visible() {

src/components/menubar/MenubarSub.vue

@@ -3,10 +3,11 @@
         <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"
                 @mouseenter="onItemMouseEnter($event, item)">
-                <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" v-ripple
+                <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
-                    @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem">
+                     <a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
                         <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" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
                     @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
@@ -87,16 +88,12 @@ export default {
                 this.activeItem = item;
             }
         },
-        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,
@@ -114,6 +111,10 @@ export default {
             if (!item.items) {
                 this.onLeafClick();
             }
+
+            if (item.to && navigate) {
+                navigate(event);
+            }
         },
         onLeafClick() {
             this.activeItem = null;

src/components/panelmenu/PanelMenuSub.vue

@@ -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)"
+                <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
-                    role="treeitem" :aria-expanded="isActive(item)">
+                    <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];

src/components/steps/Steps.vue

@@ -3,9 +3,11 @@
         <ul role="tablist">
             <template v-for="(item,index) of model">
                 <li v-if="visible(item)" :key="item.to" :class="getItemClass(item)" :style="item.style" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
-                    <router-link :to="item.to" class="p-menuitem-link" @click="onItemClick($event, item)" v-if="!isItemDisabled(item)" role="presentation">
+                    <router-link :to="item.to" v-if="!isItemDisabled(item)" custom v-slot="{navigate, href}">
+                        <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation">
                             <span class="p-steps-number">{{index + 1}}</span>
                             <span class="p-steps-title">{{item.label}}</span>
+                        </a>
                     </router-link>
                     <span v-else class="p-menuitem-link" role="presentation">
                         <span class="p-steps-number">{{index + 1}}</span>
@@ -36,7 +38,7 @@ export default {
         }
     },
     methods: {
-        onItemClick(event, item) {
+        onItemClick(event, item, navigate) {
             if (item.disabled || this.readonly) {
                 event.preventDefault();
                 return;
@@ -48,6 +50,10 @@ export default {
                     item: item
                 });
             }
+
+            if (item.to && navigate) {
+                navigate(event);
+            }
         },
         isActive(item) {
             return this.activeRoute === item.to || this.activeRoute === item.to + '/' ;

src/components/tabmenu/TabMenu.vue

@@ -3,9 +3,11 @@
         <ul ref="nav" class="p-tabmenu-nav p-reset" role="tablist">
             <template v-for="(item,i) of model">
                 <li :key="item.label + '_' + i" :class="getItemClass(item)" :style="item.style" v-if="visible(item)" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
-                    <router-link v-if="item.to && !item.disabled" :to="item.to" class="p-menuitem-link" @click="onItemClick($event, item)" role="presentation" v-ripple>
+                    <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
+                        <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation" v-ripple>
                             <span :class="getItemIcon(item)" v-if="item.icon"></span>
                             <span class="p-menuitem-text">{{item.label}}</span>
+                        </a>
                     </router-link>
                     <a v-else :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)" role="presentation" :tabindex="item.disabled ? null : '0'" v-ripple>
                         <span :class="getItemIcon(item)" v-if="item.icon"></span>
@@ -36,7 +38,7 @@ export default {
         this.updateInkBar();
     },
     methods: {
-        onItemClick(event, item) {
+        onItemClick(event, item, navigate) {
             if (item.disabled) {
                 event.preventDefault();
                 return;
@@ -48,9 +50,13 @@ export default {
                     item: item
                 });
             }
+
+            if (item.to && navigate) {
+                navigate(event);
+            }
         },
         isActive(item) {
-            return this.activeRoute.startsWith(item.to);
+            return this.activeRoute === item.to;
         },
         getItemClass(item) {
             return ['p-tabmenuitem', item.class, {

src/components/tieredmenu/TieredMenuSub.vue

@@ -3,10 +3,11 @@
         <template v-for="(item, i) of model">
             <li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
                 @mouseenter="onItemMouseEnter($event, item)" role="none">
-                <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" v-ripple
+                <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
-                    @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem">
+                     <a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
                         <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" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
                     @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
@@ -84,16 +85,12 @@ export default {
                 this.activeItem = item;
             }
         },
-        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,
@@ -111,6 +108,10 @@ export default {
             if (!item.items) {
                 this.onLeafClick();
             }
+
+            if (item.to && navigate) {
+                navigate(event);
+            }
         },
         onLeafClick() {
             this.activeItem = null;