feat: Users Breadcrumb example with /users/:id

src/views/users/User.vue

@@ -0,0 +1,51 @@
+<template>
+  <b-row>
+    <b-col cols="12" lg="6">
+      <b-card no-header>
+        <template slot="header">
+          User id:  {{ $route.params.id }}
+        </template>
+        <b-table striped small fixed responsive="sm" :items="items($route.params.id)" :fields="fields">
+          <template slot="value" slot-scope="data">
+            <strong>{{data.item.value}}</strong>
+          </template>
+        </b-table>
+        <template slot="footer">
+          <b-button @click="goBack">Back</b-button>
+        </template>
+      </b-card>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+import usersData from './UsersData'
+export default {
+  name: 'User',
+  props: {
+    caption: {
+      type: String,
+      default: 'User id'
+    },
+  },
+  data: () => {
+    return {
+      items: (id) => {
+        const user = usersData.find( user => user.id.toString() === id)
+        const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
+        return userDetails.map(([key, value]) => {return {key: key, value: value}})
+      },
+      fields: [
+        {key: 'key'},
+        {key: 'value'},
+      ],
+    }
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+      // this.$router.replace({path: '/users'})
+    }
+  }
+}
+</script>