Create new simple page

resources/js/lang/en.js

@@ -70,6 +70,7 @@ export default {
     administrator: 'Administrator',
     users: 'Users',
     userProfile: 'User Profile',
+    foo: 'Foo',
   },
   navbar: {
     logOut: 'Log Out',

resources/js/lang/vi.js

@@ -72,6 +72,7 @@ export default {
     users: 'Tài khoản',
     userProfile: 'Tài khoản người dùng',
     rolePermission: 'Quản lý quyền truy cập',
+    foo: 'Foo in VI',
   },
   navbar: {
     logOut: 'Đăng xuất',

resources/js/router/index.js

@@ -119,6 +119,29 @@ export const constantRoutes = [
     ],
   },
   elementUiRoutes,
+  {
+    path: '/foo',
+    component: Layout,
+    redirect: '/foo/index',
+    name: 'foo',
+    meta: {
+      title: 'foo',
+      icon: 'star',
+    },
+    children: [
+      {
+        path: 'index', // When clicking this submenu, it will redirect to /#/foo/index
+        component: () => import('@/views/foo/Foo.vue'),
+        name: 'foo',
+        meta: { title: 'foo' }, // foo submenu
+      },
+      {
+        path: 'bar', // When clicking this submenu, it will redirect to /#/foo/bar
+        name: 'bar',
+        meta: { title: 'bar' }, // bar submenu
+      },
+    ],
+  },
 ];
 
 export const asyncRoutes = [

resources/js/views/foo/Foo.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="app-container">
+    <div class="row justify-content-center">
+      <div class="col-md-8">
+        <div class="card card-default">
+          <h3 class="card-header">Foo Component</h3>
+          <div class="card-body">
+            I'm a foo component.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    console.log('Foo component mounted.');
+  },
+};
+</script>