diff --git a/src/constants/data.ts b/src/constants/data.ts
index 5a8bf137..33779df9 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -28,15 +28,26 @@ export const Languages = [
 
 export const RoutesMap: { [key: string]: string } = {
   GeneralServices: "GENERAL",
+  GeneralServicesActiveTabIndex: "GENERAL",
   Database: "VIRTUAL_DATABASE",
+  DatabaseActiveTabIndex: "VIRTUAL_DATABASE",
   MeshServices: "MESH",
+  MeshServicesActiveTabIndex: "MESH",
   ControlPanel: "MESH_CP",
+  ControlPanelActiveTabIndex: "MESH_CP",
   DataPanel: "MESH_DP",
+  DataPanelActiveTabIndex: "MESH_DP",
   Linux: "OS_LINUX",
   SkyWalkingServer: "SO11Y_OAP",
+  SkyWalkingServerActiveTabIndex: "SO11Y_OAP",
+  SatelliteActiveTabIndex: "SO11Y_SATELLITE",
   Satellite: "SO11Y_SATELLITE",
   Functions: "FAAS",
+  FunctionsActiveTabIndex: "FAAS",
   Browser: "BROWSER",
+  BrowserActiveTabIndex: "BROWSER",
   KubernetesCluster: "K8S",
+  KubernetesClusterActiveTabIndex: "K8S",
   KubernetesService: "K8S_SERVICE",
+  KubernetesServiceActiveTabIndex: "K8S_SERVICE",
 };
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 34ad6852..44392bc4 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -55,9 +55,9 @@ limitations under the License. -->
               <router-link
                 class="items"
                 :to="m.path"
-                :exact="m.meta.exact || false"
+                :exact="(m.meta && m.meta.exact) || false"
               >
-                <span class="title">{{ t(m.meta.title) }}</span>
+                <span class="title">{{ m.meta && t(m.meta.title) }}</span>
               </router-link>
             </el-menu-item>
           </el-menu-item-group>
diff --git a/src/router/browser.ts b/src/router/browser.ts
index e0633bb6..a7a4eb20 100644
--- a/src/router/browser.ts
+++ b/src/router/browser.ts
@@ -33,12 +33,20 @@ export const routesBrowser: Array<RouteRecordRaw> = [
         name: "Browser",
         meta: {
           title: "browser",
-          headPath: "/browser",
           exact: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/browser/tab/:activeTabIndex",
+        name: "BrowserActiveTabIndex",
+        meta: {
+          notShow: true,
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
     ],
   },
 ];
diff --git a/src/router/database.ts b/src/router/database.ts
index 7dc0653c..70b82b35 100644
--- a/src/router/database.ts
+++ b/src/router/database.ts
@@ -34,12 +34,20 @@ export const routesDatabase: Array<RouteRecordRaw> = [
         name: "Database",
         meta: {
           title: "virtualDatabase",
-          headPath: "/database",
           exact: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/database/tab/:activeTabIndex",
+        name: "DatabaseActiveTabIndex",
+        meta: {
+          notShow: true,
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
     ],
   },
 ];
diff --git a/src/router/functions.ts b/src/router/functions.ts
index be1fa338..ddafec92 100644
--- a/src/router/functions.ts
+++ b/src/router/functions.ts
@@ -32,13 +32,17 @@ export const routesFunctions: Array<RouteRecordRaw> = [
         path: "/functions",
         name: "Functions",
         meta: {
-          title: "functions",
-          headPath: "/functions",
           exact: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/functions/tab/:activeTabIndex",
+        name: "FunctionsActiveTabIndex",
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
     ],
   },
 ];
diff --git a/src/router/general.ts b/src/router/general.ts
index bc8aaf1b..e9bb7b8f 100644
--- a/src/router/general.ts
+++ b/src/router/general.ts
@@ -33,7 +33,6 @@ export const routesGen: Array<RouteRecordRaw> = [
         path: "/general",
         name: "GeneralServices",
         meta: {
-          headPath: "/general/service",
           exact: true,
         },
         component: () =>
@@ -43,7 +42,6 @@ export const routesGen: Array<RouteRecordRaw> = [
         path: "/general/tab/:activeTabIndex",
         name: "GeneralServicesActiveTabIndex",
         meta: {
-          headPath: "/general/service",
           exact: true,
         },
         component: () =>
diff --git a/src/router/infrastructure.ts b/src/router/infrastructure.ts
index 86bb55ee..555953f5 100644
--- a/src/router/infrastructure.ts
+++ b/src/router/infrastructure.ts
@@ -39,6 +39,15 @@ export const routesInfra: Array<RouteRecordRaw> = [
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/linux/tab/:activeTabIndex",
+        name: "LinuxActiveTabIndex",
+        meta: {
+          title: "linux",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
       // {
       //   path: "/infrastructure/vm",
       //   name: "VirtualMachine",
diff --git a/src/router/k8s.ts b/src/router/k8s.ts
index 38adf3f7..a9390bd8 100644
--- a/src/router/k8s.ts
+++ b/src/router/k8s.ts
@@ -33,20 +33,42 @@ export const routesK8s: Array<RouteRecordRaw> = [
         path: "/kubernetes/cluster",
         name: "KubernetesCluster",
         meta: {
+          notShow: false,
           title: "kubernetesCluster",
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/kubernetes/cluster/tab/:activeTabIndex",
+        name: "KubernetesClusterActiveTabIndex",
+        meta: {
+          notShow: true,
+          title: "kubernetesClusterActiveTabIndex",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
       {
         path: "/kubernetes/service",
         name: "KubernetesService",
         meta: {
+          notShow: false,
           title: "kubernetesService",
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/kubernetes/service/tab/:activeTabIndex",
+        name: "KubernetesServiceActiveTabIndex",
+        meta: {
+          notShow: true,
+          title: "kubernetesServiceActiveTabIndex",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
     ],
   },
 ];
diff --git a/src/router/selfObservability.ts b/src/router/selfObservability.ts
index 4174e1bb..b2e610b1 100644
--- a/src/router/selfObservability.ts
+++ b/src/router/selfObservability.ts
@@ -34,7 +34,15 @@ export const routesSelf: Array<RouteRecordRaw> = [
         name: "SkyWalkingServer",
         meta: {
           title: "skyWalkingServer",
-          headPath: "/mesh/services",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/self/skyWalkingServer/tab/:activeTabIndex",
+        name: "SkyWalkingServerActiveTabIndex",
+        meta: {
+          notShow: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
@@ -44,7 +52,15 @@ export const routesSelf: Array<RouteRecordRaw> = [
         name: "Satellite",
         meta: {
           title: "satellite",
-          headPath: "/mesh/controlPanel",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/self/satellite/tab/:activeTabIndex",
+        name: "SatelliteActiveTabIndex",
+        meta: {
+          notShow: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
diff --git a/src/router/serviceMesh.ts b/src/router/serviceMesh.ts
index 719fae43..04df1bb2 100644
--- a/src/router/serviceMesh.ts
+++ b/src/router/serviceMesh.ts
@@ -33,8 +33,17 @@ export const routesMesh: Array<RouteRecordRaw> = [
         path: "/mesh/services",
         name: "MeshServices",
         meta: {
+          notShow: false,
           title: "services",
-          headPath: "/mesh/services",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/mesh/services/tab/:activeTabIndex",
+        name: "MeshServicesActiveTabIndex",
+        meta: {
+          notShow: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
@@ -43,8 +52,17 @@ export const routesMesh: Array<RouteRecordRaw> = [
         path: "/mesh/controlPanel",
         name: "ControlPanel",
         meta: {
+          notShow: false,
           title: "controlPanel",
-          headPath: "/mesh/controlPanel",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/mesh/controlPanel/tab/:activeTabIndex",
+        name: "ControlPanelActiveTabIndex",
+        meta: {
+          notShow: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
@@ -53,10 +71,21 @@ export const routesMesh: Array<RouteRecordRaw> = [
         path: "/mesh/dataPanel",
         name: "DataPanel",
         meta: {
+          notShow: false,
           title: "dataPanel",
-          headPath: "/mesh/dataPanel",
         },
-        component: () => import("@/views/Layer.vue"),
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/mesh/dataPanel/tab/:activeTabIndex",
+        name: "DataPanelActiveTabIndex",
+        meta: {
+          notShow: true,
+          title: "dataPanelActiveTabIndex",
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },