fix: breadcrumbs navigation broken for non-english language

coreui/vue breadcrumbs takes name as the name the component to redirect to from the router and label to display the name in UI, since only name was provided it would display that name and use that as the component, and as the components are constant values in the Router config, it was causing not found issue Signed-off-by: idrisGit <[email protected]>
DependencyTrack · Oct 19, 2024 · 64afc22 · 64afc22
1 parent 7c7a024
commit 64afc22
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 8 deletions.
diff --git a/src/containers/DefaultContainer.vue b/src/containers/DefaultContainer.vue
@@ -172,12 +172,17 @@ export default {
       subSectionUuid,
       subSectionLabel,
     ) {
+      let sectionName = this.$route.meta.sectionName;
       let sectionLabel = this.$t(this.$route.meta.i18n);
       let sectionPath = this.$route.meta.sectionPath;
       if (crumbName && subSectionName && subSectionUuid && subSectionLabel) {
         return [
-          { path: '', name: this.$t('message.home') },
-          { path: sectionPath, name: sectionLabel },
+          { path: '', name: 'Home', meta: { label: this.$t('message.home') } },
+          {
+            path: sectionPath,
+            name: sectionName,
+            meta: { label: sectionLabel },
+          },
           {
             name: subSectionName,
             params: { uuid: subSectionUuid },
@@ -187,14 +192,22 @@ export default {
         ];
       } else if (crumbName) {
         return [
-          { path: '', name: this.$t('message.home') },
-          { path: sectionPath, name: sectionLabel },
+          { path: '', name: 'Home', meta: { label: this.$t('message.home') } },
+          {
+            path: sectionPath,
+            name: sectionName,
+            meta: { label: sectionLabel },
+          },
           { name: crumbName, active: true },
         ];
       } else {
         return [
-          { path: '', name: this.$t('message.home') },
-          { path: sectionPath, name: sectionLabel },
+          { path: '', name: 'Home', meta: { label: this.$t('message.home') } },
+          {
+            path: sectionPath,
+            name: sectionName,
+            meta: { label: sectionLabel },
+          },
         ];
       }
     },