add index to import all user related views and modify some routes name

app/src/routes.js

@@ -1,28 +1,27 @@
 import Home from './views/Home'
 import Login from './views/Login'
-import Users from './views/Users'
-import User from './views/User'
+import { UserList, User } from './views/user'
 
 const routes = [
   { name: 'home', path: '/', component: Home },
   { name: 'login', path: '/login', component: Login, meta: { noAuth: true } },
+
+  // Users routes
   {
-    name: 'users',
+    name: 'user-list',
     path: '/users',
-    component: Users,
-    meta: {
-      breadcrumb: [{ name: 'users', trad: 'users' }]
-    }
+    component: UserList,
+    meta: { breadcrumb: [{ name: 'user-list', trad: 'users' }] }
   },
   {
-    name: 'user',
+    name: 'user-info',
     path: '/user/:name',
     component: User,
     props: true,
     meta: {
       breadcrumb: [
-        { name: 'users', trad: 'users' },
-        { name: 'user', param: 'name' }
+        { name: 'user-list', trad: 'users' },
+        { name: 'user-info', param: 'name' }
       ]
     }
   }

app/src/views/Home.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="home">
     <b-list-group>
-      <b-list-group-item v-for="item in menu" :key="item.id" :to="item.uri">
+      <b-list-group-item
+        v-for="item in menu"
+        :key="item.id"
+        :to="{name: item.routeName}"
+      >
         <icon :iname="item.icon" class="lg" />
         <h2>{{ $t(item.translation) }}</h2>
         <icon iname="chevron-right" class="lg fs-sm ml-auto" />
@@ -16,14 +20,14 @@ export default {
   data: () => {
     return {
       menu: [
-        { id: 0, uri: '/users', icon: 'users', translation: 'users' },
-        { id: 1, uri: '/domains', icon: 'globe', translation: 'domains' },
-        { id: 2, uri: '/apps', icon: 'cubes', translation: 'applications' },
-        { id: 3, uri: '/update', icon: 'refresh', translation: 'system_update' },
-        { id: 4, uri: '/services', icon: 'cog', translation: 'services' },
-        { id: 5, uri: '/tools', icon: 'wrench', translation: 'tools' },
-        { id: 6, uri: '/diagnosis', icon: 'stethoscope', translation: 'diagnosis' },
-        { id: 7, uri: '/backup', icon: 'archive', translation: 'backup' }
+        { id: 0, routeName: 'user-list', icon: 'users', translation: 'users' },
+        { id: 1, routeName: 'domains', icon: 'globe', translation: 'domains' },
+        { id: 2, routeName: 'apps', icon: 'cubes', translation: 'applications' },
+        { id: 3, routeName: 'update', icon: 'refresh', translation: 'system_update' },
+        { id: 4, routeName: 'services', icon: 'cog', translation: 'services' },
+        { id: 5, routeName: 'tools', icon: 'wrench', translation: 'tools' },
+        { id: 6, routeName: 'diagnosis', icon: 'stethoscope', translation: 'diagnosis' },
+        { id: 7, routeName: 'backup', icon: 'archive', translation: 'backup' }
       ]
     }
   }

app/src/views/user/User.vue

@@ -77,7 +77,7 @@ export default {
   name: 'User',
   props: {
     name: {
-      type: Object,
+      type: String,
       required: true
     }
   },

app/src/views/user/UserList.vue

@@ -12,7 +12,7 @@
         <b-list-group-item
           v-for="(user, index) in (users ? users : 3)"
           :key="index"
-          :to="users ? { name: 'user', params: { name: user.username }} : null"
+          :to="users ? { name: 'user-info', params: { name: user.username }} : null"
           class="d-flex justify-content-between align-items-center pr-0"
         >
           <div>
@@ -35,7 +35,7 @@
 import api from '@/helpers/api'
 
 export default {
-  name: 'Users',
+  name: 'UserList',
   data: function () {
     return {
       users: undefined

app/src/views/user/index.js

@@ -0,0 +1,2 @@
+export { default as User } from './User'
+export { default as UserList } from './UserList'