feat: Users Breadcrumb example with /users/:id

src/containers/DefaultContainer.vue

@@ -8,8 +8,8 @@
       </b-link>
       <SidebarToggler class="d-md-down-none" display="lg" />
       <b-navbar-nav class="d-md-down-none">
-        <b-nav-item class="px-3">Dashboard</b-nav-item>
+        <b-nav-item class="px-3" to="/dashboard">Dashboard</b-nav-item>
-        <b-nav-item class="px-3">Users</b-nav-item>
+        <b-nav-item class="px-3" to="/users" exact>Users</b-nav-item>
         <b-nav-item class="px-3">Settings</b-nav-item>
       </b-navbar-nav>
       <b-navbar-nav class="ml-auto">
@@ -37,7 +37,7 @@
         <SidebarMinimizer/>
       </AppSidebar>
       <main class="main">
-        <breadcrumb :list="list"/>
+        <Breadcrumb :list="list"/>
         <div class="container-fluid">
           <router-view></router-view>
         </div>
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import nav from '../_nav'
+import nav from '@/_nav'
 import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
 import DefaultAside from './DefaultAside'
 import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
@@ -87,7 +87,7 @@ export default {
       return this.$route.name
     },
     list () {
-      return this.$route.matched
+      return this.$route.matched.filter((route) => route.name || route.meta.label )
     }
   }
 }

src/router/index.js

@@ -54,6 +54,10 @@ const Page500 = () => import('@/views/pages/Page500')
 const Login = () => import('@/views/pages/Login')
 const Register = () => import('@/views/pages/Register')
 
+// Users
+const Users = () => import('@/views/users/Users')
+const User = () => import('@/views/users/User')
+
 Vue.use(Router)
 
 export default new Router({
@@ -102,6 +106,25 @@ export default new Router({
           name: 'Widgets',
           component: Widgets
         },
+        {
+          path: 'users',
+          meta: { label: 'Users'},
+          component: {
+            render (c) { return c('router-view') }
+          },
+          children: [
+            {
+              path: '',
+              component: Users,
+            },
+            {
+              path: ':id',
+              meta: { label: 'User Details'},
+              name: 'User',
+              component: User,
+            },
+          ]
+        },
         {
           path: 'base',
           redirect: '/base/cards',

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>

src/views/users/Users.vue

@@ -0,0 +1,99 @@
+<template>
+  <b-row>
+    <b-col cols="12" xl="6">
+      <transition name="slide">
+      <b-card :header="caption">
+        <b-table :hover="hover" :striped="striped" :bordered="bordered" :small="small" :fixed="fixed" responsive="sm" :items="items" :fields="fields" :current-page="currentPage" :per-page="perPage" @row-clicked="rowClicked">
+          <template slot="id" slot-scope="data">
+            <strong>{{data.item.id}}</strong>
+          </template>
+          <template slot="name" slot-scope="data">
+            <strong>{{data.item.name}}</strong>
+          </template>
+          <template slot="status" slot-scope="data">
+            <b-badge :variant="getBadge(data.item.status)">{{data.item.status}}</b-badge>
+          </template>
+        </b-table>
+        <nav>
+          <b-pagination size="sm" :total-rows="getRowCount(items)" :per-page="perPage" v-model="currentPage" prev-text="Prev" next-text="Next" hide-goto-end-buttons/>
+        </nav>
+      </b-card>
+      </transition>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+import usersData from './UsersData'
+export default {
+  name: 'Users',
+  props: {
+    caption: {
+      type: String,
+      default: 'Users'
+    },
+    hover: {
+      type: Boolean,
+      default: true
+    },
+    striped: {
+      type: Boolean,
+      default: true
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    },
+    small: {
+      type: Boolean,
+      default: false
+    },
+    fixed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: () => {
+    return {
+      items: usersData.filter((user) => user.id < 42),
+      fields: [
+        {key: 'id'},
+        {key: 'name'},
+        {key: 'registered'},
+        {key: 'role'},
+        {key: 'status'}
+      ],
+      currentPage: 1,
+      perPage: 5,
+      totalRows: 0
+    }
+  },
+  computed: {
+  },
+  methods: {
+    getBadge (status) {
+      return status === 'Active' ? 'success'
+        : status === 'Inactive' ? 'secondary'
+          : status === 'Pending' ? 'warning'
+            : status === 'Banned' ? 'danger' : 'primary'
+    },
+    getRowCount (items) {
+      return items.length
+    },
+    userLink (id) {
+      return `users/${id.toString()}`
+    },
+    rowClicked (item) {
+      const userLink = this.userLink(item.id)
+      this.$router.push({path: userLink})
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+.card-body >>> table > tbody > tr > td {
+  cursor: pointer;
+}
+</style>

src/views/users/UsersData.js

@@ -0,0 +1,31 @@
+const usersData = [
+  {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
+  {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
+  {id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
+  {id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
+  {id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
+  {id: 23, name: 'Einar Randall', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
+  {id: 24, name: 'Félix Troels', registered: '2018/03/21', role: 'Staff', status: 'Active'},
+  {id: 25, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
+  {id: 42, name: 'Ford Prefex', registered: '2001/05/21', role: 'Alien', status: 'Don\'t panic!'}
+]
+
+export default usersData