Generate routes from tabs that are kept in localStorage

package.json

@@ -69,7 +69,7 @@
     "vue": "^2.6.8",
     "vue-count-to": "1.0.13",
     "vue-i18n": "^8.9.0",
-    "vue-router": "3.0.2",
+    "vue-router": "^3.5.1",
     "vue-splitpane": "1.0.2",
     "vuedraggable": "^2.16.0",
     "vuex": "3.0.1",

src/router/index.js

@@ -8,14 +8,25 @@ import Layout from '@/views/layout/Layout'
 
 const disabledFeatures = process.env.DISABLED_FEATURES || []
 const settingsDisabled = disabledFeatures.includes('settings')
+const settingsChildren = () => {
+  const items = localStorage.getItem('settingsTabs') || []
+  return JSON.parse(items).map(({ label, value }) => {
+    return {
+      path: value,
+      component: () => import(`@/views/settings/components/${label}`),
+      name: label,
+      meta: { title: label }
+    }
+  })
+}
 const settings = {
   path: '/settings',
   component: Layout,
   name: 'Settings',
   hasSubmenu: true,
-  meta: { title: 'settings', icon: 'settings', noCache: true }
+  meta: { title: 'settings', icon: 'settings', noCache: true },
+  children: settingsChildren()
 }
-
 const statusesDisabled = disabledFeatures.includes('statuses')
 const statuses = {
   path: '/statuses',

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -1,6 +1,7 @@
 <template>
-  <div v-if="!item.hidden && item.children && invitesEnabled" class="menu-wrapper">
-    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+  <div v-if="!item.hidden && invitesEnabled" class="menu-wrapper">
+    <template
+      v-if="item.children && hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
       <app-link :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
           <item
@@ -89,14 +90,15 @@ export default {
   },
   methods: {
     hasOneShowingChild(children, parent) {
+      if (parent.hasSubmenu) {
+        console.log(children)
+        return false
+      }
+
       const showingChildren = children.filter(item => {
-        if (item.hidden) {
-          return false
-        } else {
-          // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
-        }
+        // Temp set(will be used if only has one showing child)
+        this.onlyOneChild = item
+        return true
       })
 
       // When there is only one child router, the child router is displayed by default

yarn.lock

@@ -11258,10 +11258,10 @@ vue-loader@15.3.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-router@3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
-  integrity sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg==
+vue-router@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"
+  integrity sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw==
 
 vue-splitpane@1.0.2:
   version "1.0.2"