Merge pull request AsgardCms#752 from mikemand/hotfix/vue-router-dupl…

…icate-navigation Catch 'NavigationDuplicated' error and ignore it
arturmamedov · Feb 5, 2020 · bf02285 · bf02285
2 parents 65f978b + 37dea83
commit bf02285
Show file tree

Hide file tree

Showing 24 changed files with 5,605 additions and 6,258 deletions.
diff --git a/Modules/Core/Assets/js/components/EditButtonComponent.vue b/Modules/Core/Assets/js/components/EditButtonComponent.vue
@@ -3,13 +3,16 @@
 </template>
 
 <script>
+    import ShortcutHelper from '../../../../Core/Assets/js/mixins/ShortcutHelper';
+
     export default {
+        mixins: [ShortcutHelper],
         props: {
             to: { required: true, type: Object },
         },
         methods: {
             goToEditPage() {
-                this.$router.push(this.to);
+                this.pushRoute(this.to);
             },
         },
     };

diff --git a/Modules/Core/Assets/js/mixins/ShortcutHelper.js b/Modules/Core/Assets/js/mixins/ShortcutHelper.js
@@ -1,7 +1,17 @@
 export default {
     methods: {
-        pushRoute(route) {
-            this.$router.push(route);
+        pushRoute(route, onError) {
+            this.$router.push(route, () => {}, (error, ...args) => {
+                // vue-router 3.1.0+ push/replace causes NavigationDuplicated error
+                // for routing to the same location
+                if (error.name === 'NavigationDuplicated') {
+                    return;
+                }
+
+                if (typeof onError === 'function') {
+                    onError(error, ...args);
+                }
+            });
         },
     },
 };
diff --git a/Modules/Media/Assets/js/components/MediaForm.vue b/Modules/Media/Assets/js/components/MediaForm.vue
@@ -94,9 +94,11 @@
     import Form from 'form-backend-validation';
     import FormErrors from '../../../../Core/Assets/js/components/FormErrors.vue';
     import TagsInput from '../../../../Tag/Assets/js/components/TagInput.vue';
+    import ShortcutHelper from '../../../../Core/Assets/js/mixins/ShortcutHelper';
 
     export default {
         components: { FormErrors, TagsInput },
+        mixins: [ShortcutHelper],
         props: {
             locales: { default: null, type: Object },
         },
@@ -157,7 +159,7 @@
                             type: 'success',
                             message: response.message,
                         });
-                        this.$router.push({ name: 'admin.media.media.index', query: { folder_id: this.media.folder_id } });
+                        this.pushRoute({ name: 'admin.media.media.index', query: { folder_id: this.media.folder_id } });
                     })
                     .catch((error) => {
                         console.log(error);
@@ -170,10 +172,10 @@
             },
             onCancel() {
                 if (this.media.folder_id === 0) {
-                    this.$router.push({ name: 'admin.media.media.index', query: {} });
+                    this.pushRoute({ name: 'admin.media.media.index', query: {} });
                     return;
                 }
-                this.$router.push({ name: 'admin.media.media.index', query: { folder_id: this.media.folder_id } });
+                this.pushRoute({ name: 'admin.media.media.index', query: { folder_id: this.media.folder_id } });
             },
         },
     };

diff --git a/Modules/Media/Assets/js/components/MediaList.vue b/Modules/Media/Assets/js/components/MediaList.vue
@@ -134,9 +134,11 @@
     import UploadZone from './UploadZone.vue';
     import DeleteButton from '../../../../Core/Assets/js/components/DeleteComponent.vue';
     import EditButton from '../../../../Core/Assets/js/components/EditButtonComponent.vue';
+    import ShortcutHelper from '../../../../Core/Assets/js/mixins/ShortcutHelper';
 
     export default {
         components: { MoveDialog, NewFolder, RenameFolder, UploadZone, DeleteButton, EditButton },
+        mixins: [ShortcutHelper],
         props: {
             singleModal: { default: false, type: Boolean },
             eventName: { default: null, type: String },
@@ -262,7 +264,7 @@
             enterFolder(scope) {
                 this.tableIsLoading = true;
                 this.folderId = scope.row.id;
-                this.$router.push({ query: { folder_id: scope.row.id } });
+                this.pushRoute({ query: { folder_id: scope.row.id } });
             },
             insertMedia(scope) {
                 this.$events.emit(this.eventName, scope.row);
@@ -283,9 +285,9 @@
                 this.tableIsLoading = true;
                 this.folderId = folderId;
                 if (folderId === 0) {
-                    this.$router.push({ query: {} });
+                    this.pushRoute({ query: {} });
                 } else {
-                    this.$router.push({ query: { folder_id: folderId } });
+                    this.pushRoute({ query: { folder_id: folderId } });
                 }
             },
             batchDelete() {
@@ -317,7 +319,7 @@
                     });
             },
             goToEdit(scope) {
-                this.$router.push({ name: 'admin.media.media.edit', params: { mediaId: scope.row.id } });
+                this.pushRoute({ name: 'admin.media.media.edit', params: { mediaId: scope.row.id } });
             },
         },
     };

diff --git a/Modules/Page/Assets/js/components/PageForm.vue b/Modules/Page/Assets/js/components/PageForm.vue
@@ -220,7 +220,7 @@
                             type: 'success',
                             message: response.message,
                         });
-                        this.$router.push({ name: 'admin.page.page.index' });
+                        this.pushRoute({ name: 'admin.page.page.index' });
                     })
                     .catch((error) => {
                         console.log(error);
@@ -232,7 +232,7 @@
                     });
             },
             onCancel() {
-                this.$router.push({ name: 'admin.page.page.index' });
+                this.pushRoute({ name: 'admin.page.page.index' });
             },
             fetchTemplates() {
                 axios.get(route('api.page.page-templates.index'))

diff --git a/Modules/Page/Assets/js/components/PageTable.vue b/Modules/Page/Assets/js/components/PageTable.vue
@@ -216,7 +216,7 @@
                 this.selectedPages = selectedPages;
             },
             goToEdit(scope) {
-                this.$router.push({ name: 'admin.page.page.edit', params: { pageId: scope.row.id } });
+                this.pushRoute({ name: 'admin.page.page.edit', params: { pageId: scope.row.id } });
             },
             editRoute(scope) {
                 return route('admin.page.page.edit', [scope.row.id]);

diff --git a/Modules/User/Assets/js/components/RoleForm.vue b/Modules/User/Assets/js/components/RoleForm.vue
@@ -115,7 +115,7 @@
                             type: 'success',
                             message: response.message,
                         });
-                        this.$router.push({ name: 'admin.user.role.index' });
+                        this.pushRoute({ name: 'admin.user.role.index' });
                     })
                     .catch((error) => {
                         console.log(error);
@@ -127,7 +127,7 @@
                     });
             },
             onCancel() {
-                this.$router.push({ name: 'admin.user.role.index' });
+                this.pushRoute({ name: 'admin.user.role.index' });
             },
             generateSlug() {
                 this.role.slug = this.slugify(this.role.name);

diff --git a/Modules/User/Assets/js/components/RoleTable.vue b/Modules/User/Assets/js/components/RoleTable.vue
@@ -161,7 +161,7 @@
                 this.queryServer({ search: query.target.value });
             }, 300),
             goToEdit(scope) {
-                this.$router.push({ name: 'admin.user.role.edit', params: { roleId: scope.row.id } });
+                this.pushRoute({ name: 'admin.user.role.edit', params: { roleId: scope.row.id } });
             },
             editRoute(scope) {
                 return route('admin.user.role.edit', [scope.row.id]);

diff --git a/Modules/User/Assets/js/components/UserForm.vue b/Modules/User/Assets/js/components/UserForm.vue
@@ -165,7 +165,7 @@
                             type: 'success',
                             message: response.message,
                         });
-                        this.$router.push({ name: 'admin.user.user.index' });
+                        this.pushRoute({ name: 'admin.user.user.index' });
                     })
                     .catch((error) => {
                         console.log(error);
@@ -177,7 +177,7 @@
                     });
             },
             onCancel() {
-                this.$router.push({ name: 'admin.user.user.index' });
+                this.pushRoute({ name: 'admin.user.user.index' });
             },
             fetchUser() {
                 this.loading = true;

diff --git a/Modules/User/Assets/js/components/UserTable.vue b/Modules/User/Assets/js/components/UserTable.vue
@@ -170,7 +170,7 @@
                 this.queryServer({ search: query.target.value });
             }, 300),
             goToEdit(scope) {
-                this.$router.push({ name: 'admin.user.user.edit', params: { userId: scope.row.id } });
+                this.pushRoute({ name: 'admin.user.user.edit', params: { userId: scope.row.id } });
             },
             editRoute(scope) {
                 return route('admin.user.user.edit', [scope.row.id]);

diff --git a/public/css/app.css b/public/css/app.css