1 files changed, 19 insertions, 1 deletions
diff --git a/app/assets/javascripts/packages_and_registries/package_registry/router.js b/app/assets/javascripts/packages_and_registries/package_registry/router.js
index ea5b740e879..c5ef4f70dd9 100644
--- a/app/assets/javascripts/packages_and_registries/package_registry/router.js
+++ b/app/assets/javascripts/packages_and_registries/package_registry/router.js
@@ -1,10 +1,12 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import List from '~/packages_and_registries/package_registry/pages/list.vue';
+import Details from '~/packages_and_registries/package_registry/pages/details.vue';
+import { PACKAGE_REGISTRY_TITLE } from '~/packages_and_registries/package_registry/constants';
 
 Vue.use(VueRouter);
 
-export default function createRouter(base) {
+export default function createRouter(base, breadCrumbState) {
   const router = new VueRouter({
     base,
     mode: 'history',
@@ -13,9 +15,25 @@ export default function createRouter(base) {
         name: 'list',
         path: '/',
         component: List,
+        meta: {
+          nameGenerator: () => PACKAGE_REGISTRY_TITLE,
+          root: true,
+        },
+      },
+      {
+        name: 'details',
+        path: '/:id',
+        component: Details,
+        meta: {
+          nameGenerator: () => breadCrumbState.name,
+        },
       },
     ],
   });
 
+  router.afterEach(() => {
+    breadCrumbState.updateName('');
+  });
+
   return router;
 }