From 3f2b51a4870aceb993f550df68f16cba9953d2d3 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 22 Oct 2020 14:50:31 +0300
Subject: [PATCH] Fixed #536 - Menu components with web router refresh the
 whole page

---
 src/components/breadcrumb/BreadcrumbItem.vue  | 14 +++++---
 src/components/contextmenu/ContextMenuSub.vue | 27 +++++++++-----
 src/components/megamenu/MegaMenu.vue          | 36 +++++++++++--------
 src/components/menu/Menu.vue                  |  6 +++-
 src/components/menu/Menuitem.vue              | 13 ++++---
 src/components/menubar/MenubarSub.vue         | 19 +++++-----
 src/components/panelmenu/PanelMenuSub.vue     | 19 +++++-----
 src/components/steps/Steps.vue                | 14 +++++---
 src/components/tabmenu/TabMenu.vue            | 16 ++++++---
 src/components/tieredmenu/TieredMenuSub.vue   | 19 +++++-----
 10 files changed, 114 insertions(+), 69 deletions(-)

diff --git a/src/components/breadcrumb/BreadcrumbItem.vue b/src/components/breadcrumb/BreadcrumbItem.vue
index f08c301d1..35b341aee 100755
--- a/src/components/breadcrumb/BreadcrumbItem.vue
+++ b/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">
-            <span v-if="item.icon" :class="iconClass"></span>
-            <span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
+        <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);
diff --git a/src/components/contextmenu/ContextMenuSub.vue b/src/components/contextmenu/ContextMenuSub.vue
index ff849a6f4..8366b08ff 100755
--- a/src/components/contextmenu/ContextMenuSub.vue
+++ b/src/components/contextmenu/ContextMenuSub.vue
@@ -4,12 +4,14 @@
             <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>
-                        <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" @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'">
+                         :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="item.disabled ? null : '0'">
                         <span :class="['p-menuitem-icon', item.icon]"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
                         <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
@@ -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;
diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue
index 480de195d..b943ca038 100755
--- a/src/components/megamenu/MegaMenu.vue
+++ b/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>
-                                                <span v-if="item.icon" :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="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;
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index c7e09e7bf..ad7de1e07 100755
--- a/src/components/menu/Menu.vue
+++ b/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) {
diff --git a/src/components/menu/Menuitem.vue b/src/components/menu/Menuitem.vue
index 0cba7f741..727e9721f 100755
--- a/src/components/menu/Menuitem.vue
+++ b/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>
-            <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" @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() {
diff --git a/src/components/menubar/MenubarSub.vue b/src/components/menubar/MenubarSub.vue
index 65ccf7d48..ebf04acac 100755
--- a/src/components/menubar/MenubarSub.vue
+++ b/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
-                    @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 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 @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;
diff --git a/src/components/panelmenu/PanelMenuSub.vue b/src/components/panelmenu/PanelMenuSub.vue
index fe80da4fd..bcaee77f0 100755
--- a/src/components/panelmenu/PanelMenuSub.vue
+++ b/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)"
-                    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];
diff --git a/src/components/steps/Steps.vue b/src/components/steps/Steps.vue
index 1f7088d3f..90707cddb 100755
--- a/src/components/steps/Steps.vue
+++ b/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">
-                        <span class="p-steps-number">{{index + 1}}</span>
-                        <span class="p-steps-title">{{item.label}}</span>
+                    <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 + '/' ;
diff --git a/src/components/tabmenu/TabMenu.vue b/src/components/tabmenu/TabMenu.vue
index 42454335f..e0cdbcaf5 100755
--- a/src/components/tabmenu/TabMenu.vue
+++ b/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>
-                        <span :class="getItemIcon(item)" v-if="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="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, {
diff --git a/src/components/tieredmenu/TieredMenuSub.vue b/src/components/tieredmenu/TieredMenuSub.vue
index a10df3a48..31acf96f7 100755
--- a/src/components/tieredmenu/TieredMenuSub.vue
+++ b/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
-                    @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 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 @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;