1 files changed, 12 insertions, 4 deletions

diff --git a/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue b/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue
index 755287bf8a1..1c677c0d9e6 100644
--- a/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/incident_tabs.vue
@@ -59,13 +59,16 @@ export default {
   data() {
     return {
       alert: null,
-      activeTabIndex: 0,
     };
   },
   computed: {
     loading() {
       return this.$apollo.queries.alert.loading;
     },
+    activeTabIndex() {
+      const { tabId } = this.$route.params;
+      return tabId ? this.tabMapping.tabNamesToIndex[tabId] : 0;
+    },
     tabMapping() {
       const availableTabs = [TAB_NAMES.SUMMARY];
 
@@ -93,20 +96,25 @@ export default {
         return this.activeTabIndex;
       },
       set(index) {
-        this.handleTabChange(index);
-        this.activeTabIndex = index;
+        const newPath = `/${this.tabMapping.tabIndexToName[index]}`;
+        // Only push if the new path differs from the old path.
+        if (newPath !== this.$route.path) {
+          this.$router.push(newPath);
+          this.updateJsIssueWidgets(index);
+        }
       },
     },
   },
   mounted() {
     this.trackPageViews();
+    this.updateJsIssueWidgets(this.activeTabIndex);
   },
   methods: {
     trackPageViews() {
       const { category, action } = trackIncidentDetailsViewsOptions;
       Tracking.event(category, action);
     },
-    handleTabChange(tabIndex) {
+    updateJsIssueWidgets(tabIndex) {
       /**
        * TODO: Implement a solution that does not violate Vue principles in using
        * DOM manipulation directly (#361618)