fix: #1121 breadcrumb component not routing (#1169)

bcgov · Feb 8, 2024 · f14c878 · f14c878
1 parent 05a1124
commit f14c878
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,7 +15,7 @@
         "test-coverage": "vitest run --coverage"
     },
     "dependencies": {
-        "@bcgov-nr/nr-theme": "^1.8.3",
+        "@bcgov-nr/nr-theme": "^1.8.4",
         "@carbon/icons-vue": "^10.72.1",
         "aws-amplify": "^5.3.6",
         "axios": "1.6.5",

diff --git a/frontend/src/components/common/PageTitle.vue b/frontend/src/components/common/PageTitle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router';
+import { RouterLink, useRoute } from 'vue-router';
 import Breadcrumb from 'primevue/breadcrumb';
 import { breadcrumbState } from '@/store/BreadcrumbState';
 
@@ -18,7 +18,21 @@ const route = useRoute();
 </script>
 
 <template>
-    <Breadcrumb v-if="route.meta.hasBreadcrumb" :model="breadcrumbState" />
+    <Breadcrumb
+        v-if="route.meta.hasBreadcrumb"
+        :model="breadcrumbState"
+    >
+        <template #item="{ item }">
+            <RouterLink
+                v-if="item.path"
+                :to="item.path"
+            >
+                <span>
+                    {{ item.label }}
+                </span>
+            </RouterLink>
+        </template>
+    </Breadcrumb>
     <h1 class="title">{{ props.title }}</h1>
     <h2 class="subtitle">{{ props.subtitle }}</h2>
 </template>