Breadcrumb navigation links

Make it possible to use `route.params` inside the breadcrumb.
Use it to link to `/:chain/staking` and `/:chain/blocks`.

src/@core/layouts/components/AppBreadcrumb.vue

@@ -31,7 +31,7 @@
                 {{ chainname }}
               </b-breadcrumb-item>
               <b-breadcrumb-item
-                v-for="item in $route.meta.breadcrumb"
+                v-for="item in breadcrumb"
                 :key="item.text"
                 :active="item.active"
                 :to="item.to"
@@ -75,6 +75,14 @@ export default {
     chainname() {
       return this.$store?.state?.chains?.selected?.chain_name
     },
+    /**
+     * Invoke `route.meta.breadcrumb($route)` if breadcrumb is callable.
+     */
+    breadcrumb() {
+      const { breadcrumb } = this.$route.meta
+      const breadcrumbIsCallable = typeof breadcrumb === 'function'
+      return breadcrumbIsCallable ? breadcrumb(this.$route) : breadcrumb
+    },
   },
 }
 </script>

src/router/index.js

@@ -249,16 +249,16 @@ const router = new VueRouter({
       component: () => import('@/views/StakingValidator.vue'),
       meta: {
         pageTitle: 'Staking Validator',
-        breadcrumb: [
+        breadcrumb: route => ([
           {
             text: 'Staking',
-            active: true,
+            to: `/${route.params.chain}/staking`,
           },
           {
             text: 'Validator',
             active: true,
           },
-        ],
+        ]),
       },
     },
     {
@@ -317,16 +317,16 @@ const router = new VueRouter({
       component: () => import('@/views/Block.vue'),
       meta: {
         pageTitle: 'Block',
-        breadcrumb: [
+        breadcrumb: route => ([
           {
             text: 'Blocks',
-            active: true,
+            to: `/${route.params.chain}/blocks`,
           },
           {
             text: 'Block',
             active: true,
           },
-        ],
+        ]),
       },
     },
     {