diff --git a/frontend/src/components/back-button/index.vue b/frontend/src/components/back-button/index.vue
index 53c09a888..e6b2aefdd 100644
--- a/frontend/src/components/back-button/index.vue
+++ b/frontend/src/components/back-button/index.vue
@@ -7,6 +7,7 @@
 </template>
 
 <script setup lang="ts">
+import { routerToName, routerToPath } from '@/utils/router';
 import { inject, useSlots } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -25,10 +26,10 @@ function jump() {
         reloadPage();
     }
     if (path) {
-        router.push(path);
+        routerToPath(path);
     }
     if (name) {
-        router.push({ name: name });
+        routerToName(name);
     }
     if (to) {
         router.push(to);
diff --git a/frontend/src/components/backup/index.vue b/frontend/src/components/backup/index.vue
index ba851b54e..73590d57e 100644
--- a/frontend/src/components/backup/index.vue
+++ b/frontend/src/components/backup/index.vue
@@ -131,10 +131,10 @@ import {
 } from '@/api/modules/backup';
 import i18n from '@/lang';
 import { Backup } from '@/api/interface/backup';
-import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
 import TaskLog from '@/components/log/task/index.vue';
 import { GlobalStore } from '@/store';
+import { routerToFileWithPath } from '@/utils/router';
 const globalStore = GlobalStore();
 
 const selects = ref<any>([]);
@@ -194,7 +194,7 @@ const loadBackupDir = async () => {
 };
 
 const goFile = async () => {
-    router.push({ name: 'File', query: { path: `${backupPath.value}/app/${name.value}/${detailName.value}` } });
+    routerToFileWithPath(`${backupPath.value}/app/${name.value}/${detailName.value}`);
 };
 
 const onChange = async (info: any) => {
diff --git a/frontend/src/components/layout-content/no-such-service.vue b/frontend/src/components/layout-content/no-such-service.vue
index 33f1ddd01..080ca5c07 100644
--- a/frontend/src/components/layout-content/no-such-service.vue
+++ b/frontend/src/components/layout-content/no-such-service.vue
@@ -20,13 +20,13 @@
 </template>
 
 <script lang="ts" setup>
-import router from '@/routers';
+import { routerToNameWithQuery } from '@/utils/router';
 
 const prop = defineProps({
     name: String,
 });
 
 const toDoc = () => {
-    router.push({ name: 'Library', query: { uncached: 'true' } });
+    routerToNameWithQuery('Library', { uncached: 'true' });
 };
 </script>
diff --git a/frontend/src/components/router-button/index.vue b/frontend/src/components/router-button/index.vue
index 0eda101a5..f991ee149 100644
--- a/frontend/src/components/router-button/index.vue
+++ b/frontend/src/components/router-button/index.vue
@@ -23,6 +23,7 @@
 </template>
 
 <script lang="ts" setup>
+import { routerToName, routerToPath } from '@/utils/router';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -41,12 +42,6 @@ const buttonArray = computed(() => {
 
 const router = useRouter();
 const activeName = ref('');
-const routerToPath = (path: string) => {
-    router.push({ path: path });
-};
-const routerToName = (name: string) => {
-    router.push({ name: name });
-};
 
 const handleChange = (label: string) => {
     const btn = buttonArray.value.find((btn) => btn.label === label);
diff --git a/frontend/src/global/business.ts b/frontend/src/global/business.ts
deleted file mode 100644
index 7968b6204..000000000
--- a/frontend/src/global/business.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import router from '@/routers';
-
-export function toFolder(folder: string) {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-}
diff --git a/frontend/src/lang/index.ts b/frontend/src/lang/index.ts
index d40b6716f..aeae5a2c8 100644
--- a/frontend/src/lang/index.ts
+++ b/frontend/src/lang/index.ts
@@ -11,6 +11,7 @@ import tr from './modules/tr';
 
 const i18n = createI18n({
     legacy: false,
+    missingWarn: false,
     locale: localStorage.getItem('lang') || 'en',
     fallbackLocale: 'en',
     globalInjection: true,
diff --git a/frontend/src/layout/components/Sidebar/components/Collapse.vue b/frontend/src/layout/components/Sidebar/components/Collapse.vue
index e74ba533c..bc44169b9 100644
--- a/frontend/src/layout/components/Sidebar/components/Collapse.vue
+++ b/frontend/src/layout/components/Sidebar/components/Collapse.vue
@@ -88,6 +88,7 @@ import bus from '@/global/bus';
 import { logOutApi } from '@/api/modules/auth';
 import router from '@/routers';
 import { loadProductProFromDB } from '@/utils/xpack';
+import { routerToNameWithQuery } from '@/utils/router';
 
 const filter = ref();
 const globalStore = GlobalStore();
@@ -178,7 +179,7 @@ const changeNode = (command: string) => {
         globalStore.currentNode = command || 'local';
         globalStore.currentNodeAddr = '';
         loadProductProFromDB();
-        router.push({ name: 'home', query: { t: Date.now() } });
+        routerToNameWithQuery('home', { t: Date.now() });
         return;
     }
     for (const item of nodes.value) {
@@ -198,7 +199,7 @@ const changeNode = (command: string) => {
             globalStore.currentNode = command || 'local';
             globalStore.currentNodeAddr = item.addr;
             loadProductProFromDB();
-            router.push({ name: 'home', query: { t: Date.now() } });
+            routerToNameWithQuery('home', { t: Date.now() });
         }
     }
 };
diff --git a/frontend/src/layout/components/Sidebar/components/Logo.vue b/frontend/src/layout/components/Sidebar/components/Logo.vue
index 1e1f1b1ad..ea036220e 100644
--- a/frontend/src/layout/components/Sidebar/components/Logo.vue
+++ b/frontend/src/layout/components/Sidebar/components/Logo.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script setup lang="ts">
-import router from '@/routers';
 import { GlobalStore } from '@/store';
 import PrimaryLogo from '@/assets/images/1panel-logo.svg?component';
 import MenuLogo from '@/assets/images/1panel-menu-logo.svg?component';
 import { ref } from 'vue';
+import { routerToNameWithQuery } from '@/utils/router';
 
 defineProps<{ isCollapse: boolean }>();
 
@@ -37,7 +37,7 @@ const logoWithTextLoadFailed = ref(false);
 const globalStore = GlobalStore();
 
 const goHome = () => {
-    router.push({ name: 'home' });
+    routerToNameWithQuery('home', { t: Date.now() });
 };
 </script>
 
diff --git a/frontend/src/layout/components/Tabs/components/TabItem.vue b/frontend/src/layout/components/Tabs/components/TabItem.vue
index 4278d4339..146f7cb21 100644
--- a/frontend/src/layout/components/Tabs/components/TabItem.vue
+++ b/frontend/src/layout/components/Tabs/components/TabItem.vue
@@ -9,11 +9,6 @@
                 @visible-change="$emit('dropdownVisibleChange', $event, tabItem.path)"
             >
                 <span class="custom-tabs-label">
-                    <el-icon v-if="tabsStore.isShowTabIcon && menuIcon">
-                        <el-icon>
-                            <SvgIcon :iconName="menuIcon" />
-                        </el-icon>
-                    </el-icon>
                     <span>{{ menuName }}</span>
                 </span>
                 <template #dropdown>
@@ -56,11 +51,9 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { TabsStore } from '@/store';
-import { useI18n } from 'vue-i18n';
+import i18n from '@/lang';
 import { Close, DArrowLeft, DArrowRight, More } from '@element-plus/icons-vue';
-import SvgIcon from '@/components/svg-icon/svg-icon.vue';
 
-const i18n = useI18n();
 const tabsStore = TabsStore();
 
 const props = defineProps({
@@ -73,12 +66,18 @@ const props = defineProps({
 defineEmits(['closeTab', 'closeOtherTabs', 'closeTabs', 'dropdownVisibleChange']);
 
 const menuName = computed(() => {
-    return i18n.t(props.tabItem.meta.title);
+    let title;
+    if (props.tabItem.meta.parent) {
+        title = i18n.global.t(props.tabItem.meta.parent) + '-' + i18n.global.t(props.tabItem.meta.title);
+    } else {
+        title = i18n.global.t(props.tabItem.meta.title);
+    }
+    if (props.tabItem.meta.detail) {
+        title = title + '-' + i18n.global.t(props.tabItem.meta.detail);
+    }
+    return title;
 });
 
-const menuIcon = computed(() => {
-    return props.tabItem.meta.icon;
-});
 const dropdownRef = ref();
 
 defineExpose({
@@ -87,9 +86,6 @@ defineExpose({
 </script>
 
 <style scoped>
-.common-tabs .custom-tabs-label .el-icon {
-    vertical-align: middle;
-}
 .common-tabs .custom-tabs-label span {
     vertical-align: middle;
     margin-left: 4px;
diff --git a/frontend/src/routers/modules/app-store.ts b/frontend/src/routers/modules/app-store.ts
index 6aff20166..b640618f6 100644
--- a/frontend/src/routers/modules/app-store.ts
+++ b/frontend/src/routers/modules/app-store.ts
@@ -27,6 +27,8 @@ const appStoreRouter = {
                     meta: {
                         activeMenu: '/apps',
                         requiresAuth: false,
+                        parent: 'menu.app',
+                        title: 'app.all',
                     },
                 },
                 {
@@ -38,6 +40,8 @@ const appStoreRouter = {
                     meta: {
                         activeMenu: '/apps',
                         requiresAuth: false,
+                        parent: 'menu.app',
+                        title: 'app.installed',
                     },
                 },
                 {
@@ -49,6 +53,8 @@ const appStoreRouter = {
                     meta: {
                         activeMenu: '/apps',
                         requiresAuth: false,
+                        parent: 'menu.app',
+                        title: 'app.canUpgrade',
                     },
                 },
                 {
@@ -60,6 +66,8 @@ const appStoreRouter = {
                     meta: {
                         activeMenu: '/apps',
                         requiresAuth: false,
+                        parent: 'menu.app',
+                        title: 'commons.button.set',
                     },
                 },
             ],
diff --git a/frontend/src/routers/modules/container.ts b/frontend/src/routers/modules/container.ts
index 51c4739b1..87fa7a308 100644
--- a/frontend/src/routers/modules/container.ts
+++ b/frontend/src/routers/modules/container.ts
@@ -27,6 +27,8 @@ const containerRouter = {
                     meta: {
                         activeMenu: '/containers',
                         requiresAuth: false,
+                        parent: 'menu.container',
+                        title: 'menu.home',
                     },
                 },
                 {
@@ -38,6 +40,8 @@ const containerRouter = {
                     meta: {
                         activeMenu: '/containers',
                         requiresAuth: false,
+                        parent: 'menu.container',
+                        title: 'menu.container',
                     },
                 },
                 {
@@ -49,6 +53,9 @@ const containerRouter = {
                     meta: {
                         activeMenu: '/containers',
                         requiresAuth: false,
+                        parent: 'menu.container',
+                        title: 'menu.container',
+                        detail: 'commons.table.operate',
                     },
                 },
                 {
@@ -60,6 +67,9 @@ const containerRouter = {
                     meta: {
                         activeMenu: '/containers',
                         requiresAuth: false,
+                        parent: 'menu.container',
+                        title: 'container.compose',
+                        detail: 'commons.button.view',
                     },
                 },
                 {
@@ -70,6 +80,8 @@ const containerRouter = {
                     meta: {
                         activeMenu: '/containers',
                         requiresAuth: false,
+                        parent: 'menu.container',
+                        title: 'container.image',
                     },
                 },
                 {
@@ -80,6 +92,8 @@ const containerRouter = {
                     meta: {
                         activeMenu: '/containers',
                         requiresAuth: false,
+                        parent: 'menu.container',
+                        title: 'container.network',
                     },
                 },
                 {
@@ -90,6 +104,8 @@ const containerRouter = {
                     meta: {
                         activeMenu: '/containers',
                         requiresAuth: false,
+                        parent: 'menu.container',
+                        title: 'container.volume',
                     },
                 },
                 {
@@ -100,6 +116,8 @@ const containerRouter = {
                     meta: {
                         activeMenu: '/containers',
                         requiresAuth: false,
+                        parent: 'menu.container',
+                        title: 'container.repo',
                     },
                 },
                 {
@@ -110,6 +128,8 @@ const containerRouter = {
                     meta: {
                         activeMenu: '/containers',
                         requiresAuth: false,
+                        parent: 'menu.container',
+                        title: 'container.compose',
                     },
                 },
                 {
@@ -120,6 +140,8 @@ const containerRouter = {
                     meta: {
                         activeMenu: '/containers',
                         requiresAuth: false,
+                        parent: 'menu.container',
+                        title: 'container.composeTemplate',
                     },
                 },
                 {
@@ -130,6 +152,8 @@ const containerRouter = {
                     meta: {
                         activeMenu: '/containers',
                         requiresAuth: false,
+                        parent: 'menu.container',
+                        title: 'container.setting',
                     },
                 },
             ],
diff --git a/frontend/src/routers/modules/cronjob.ts b/frontend/src/routers/modules/cronjob.ts
index df00f68d6..8113cf670 100644
--- a/frontend/src/routers/modules/cronjob.ts
+++ b/frontend/src/routers/modules/cronjob.ts
@@ -26,6 +26,7 @@ const cronRouter = {
                     meta: {
                         activeMenu: '/cronjobs',
                         requiresAuth: false,
+                        title: 'menu.cronjob',
                     },
                 },
                 {
@@ -36,6 +37,8 @@ const cronRouter = {
                     meta: {
                         activeMenu: '/cronjobs',
                         requiresAuth: false,
+                        title: 'menu.cronjob',
+                        detail: 'commons.table.operate',
                     },
                 },
                 {
@@ -46,6 +49,7 @@ const cronRouter = {
                     meta: {
                         activeMenu: '/cronjobs',
                         requiresAuth: false,
+                        title: 'cronjob.library.library',
                     },
                 },
             ],
diff --git a/frontend/src/routers/modules/database.ts b/frontend/src/routers/modules/database.ts
index 898fd2c17..9f80b7db9 100644
--- a/frontend/src/routers/modules/database.ts
+++ b/frontend/src/routers/modules/database.ts
@@ -26,6 +26,8 @@ const databaseRouter = {
                     meta: {
                         activeMenu: '/databases',
                         requiresAuth: false,
+                        parent: 'menu.database',
+                        title: 'MySQL',
                     },
                 },
                 {
@@ -37,6 +39,9 @@ const databaseRouter = {
                     meta: {
                         activeMenu: '/databases',
                         requiresAuth: false,
+                        parent: 'menu.database',
+                        title: 'MySQL',
+                        detail: 'commons.button.set',
                     },
                 },
                 {
@@ -47,6 +52,9 @@ const databaseRouter = {
                     meta: {
                         activeMenu: '/databases',
                         requiresAuth: false,
+                        parent: 'menu.database',
+                        title: 'MySQL',
+                        detail: 'database.remote',
                     },
                 },
                 {
@@ -57,6 +65,8 @@ const databaseRouter = {
                     meta: {
                         activeMenu: '/databases',
                         requiresAuth: false,
+                        parent: 'menu.database',
+                        title: 'PostgreSQL',
                     },
                 },
                 {
@@ -67,6 +77,9 @@ const databaseRouter = {
                     meta: {
                         activeMenu: '/databases',
                         requiresAuth: false,
+                        parent: 'menu.database',
+                        title: 'PostgreSQL',
+                        detail: 'database.remote',
                     },
                 },
                 {
@@ -78,6 +91,9 @@ const databaseRouter = {
                     meta: {
                         activeMenu: '/databases',
                         requiresAuth: false,
+                        parent: 'menu.database',
+                        title: 'PostgreSQL',
+                        detail: 'commons.button.set',
                     },
                 },
                 {
@@ -88,6 +104,8 @@ const databaseRouter = {
                     meta: {
                         activeMenu: '/databases',
                         requiresAuth: false,
+                        parent: 'menu.database',
+                        title: 'Redis',
                     },
                 },
                 {
@@ -98,6 +116,9 @@ const databaseRouter = {
                     meta: {
                         activeMenu: '/databases',
                         requiresAuth: false,
+                        parent: 'menu.database',
+                        title: 'Redis',
+                        detail: 'database.remote',
                     },
                 },
             ],
diff --git a/frontend/src/routers/modules/host.ts b/frontend/src/routers/modules/host.ts
index d29344622..db9b93e8f 100644
--- a/frontend/src/routers/modules/host.ts
+++ b/frontend/src/routers/modules/host.ts
@@ -38,6 +38,7 @@ const hostRouter = {
             meta: {
                 activeMenu: '/hosts/monitor/monitor',
                 title: 'menu.monitor',
+                detail: 'commons.button.set',
                 requiresAuth: false,
             },
         },
@@ -46,7 +47,8 @@ const hostRouter = {
             name: 'FirewallPort',
             component: () => import('@/views/host/firewall/port/index.vue'),
             meta: {
-                title: 'menu.firewall',
+                parent: 'menu.firewall',
+                title: 'firewall.portRule',
                 requiresAuth: false,
             },
         },
@@ -57,6 +59,8 @@ const hostRouter = {
             hidden: true,
             meta: {
                 activeMenu: '/hosts/firewall/port',
+                parent: 'menu.firewall',
+                title: 'firewall.forwardRule',
                 requiresAuth: false,
             },
         },
@@ -67,6 +71,8 @@ const hostRouter = {
             hidden: true,
             meta: {
                 activeMenu: '/hosts/firewall/port',
+                parent: 'menu.firewall',
+                title: 'firewall.ipRule',
                 requiresAuth: false,
             },
         },
@@ -75,7 +81,8 @@ const hostRouter = {
             name: 'Process',
             component: () => import('@/views/host/process/process/index.vue'),
             meta: {
-                title: 'menu.processManage',
+                parent: 'menu.processManage',
+                title: 'menu.process',
                 activeMenu: '/hosts/process/process',
                 keepAlive: true,
                 requiresAuth: false,
@@ -87,6 +94,8 @@ const hostRouter = {
             hidden: true,
             component: () => import('@/views/host/process/network/index.vue'),
             meta: {
+                parent: 'menu.processManage',
+                title: 'menu.network',
                 activeMenu: '/hosts/process/process',
                 requiresAuth: false,
             },
@@ -96,7 +105,8 @@ const hostRouter = {
             name: 'SSH',
             component: () => import('@/views/host/ssh/ssh/index.vue'),
             meta: {
-                title: 'menu.ssh',
+                parent: 'menu.ssh',
+                title: 'menu.config',
                 activeMenu: '/hosts/ssh/ssh',
                 keepAlive: true,
                 requiresAuth: false,
@@ -108,6 +118,8 @@ const hostRouter = {
             component: () => import('@/views/host/ssh/log/index.vue'),
             hidden: true,
             meta: {
+                parent: 'menu.ssh',
+                title: 'ssh.loginLogs',
                 activeMenu: '/hosts/ssh/ssh',
                 requiresAuth: false,
             },
@@ -118,6 +130,8 @@ const hostRouter = {
             component: () => import('@/views/host/ssh/session/index.vue'),
             hidden: true,
             meta: {
+                parent: 'menu.ssh',
+                title: 'ssh.session',
                 activeMenu: '/hosts/ssh/ssh',
                 requiresAuth: false,
             },
diff --git a/frontend/src/routers/modules/log.ts b/frontend/src/routers/modules/log.ts
index d69f3dd94..d7112e7ee 100644
--- a/frontend/src/routers/modules/log.ts
+++ b/frontend/src/routers/modules/log.ts
@@ -24,6 +24,8 @@ const logsRouter = {
                     component: () => import('@/views/log/operation/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.logs',
+                        title: 'logs.operation',
                         activeMenu: '/logs',
                         requiresAuth: false,
                     },
@@ -34,6 +36,8 @@ const logsRouter = {
                     component: () => import('@/views/log/login/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.logs',
+                        title: 'logs.login',
                         activeMenu: '/logs',
                         requiresAuth: false,
                     },
@@ -44,6 +48,8 @@ const logsRouter = {
                     component: () => import('@/views/log/website/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.logs',
+                        title: 'logs.websiteLog',
                         activeMenu: '/logs',
                         requiresAuth: false,
                     },
@@ -54,6 +60,8 @@ const logsRouter = {
                     component: () => import('@/views/log/system/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.logs',
+                        title: 'logs.system',
                         activeMenu: '/logs',
                         requiresAuth: false,
                     },
@@ -64,6 +72,8 @@ const logsRouter = {
                     component: () => import('@/views/host/ssh/log/log.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.logs',
+                        title: 'ssh.loginLogs',
                         activeMenu: '/logs',
                         requiresAuth: false,
                     },
@@ -74,6 +84,8 @@ const logsRouter = {
                     component: () => import('@/views/log/task/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.logs',
+                        title: 'logs.task',
                         activeMenu: '/logs',
                         requiresAuth: false,
                     },
diff --git a/frontend/src/routers/modules/setting.ts b/frontend/src/routers/modules/setting.ts
index 8603a102b..c6ecd8a03 100644
--- a/frontend/src/routers/modules/setting.ts
+++ b/frontend/src/routers/modules/setting.ts
@@ -24,6 +24,8 @@ const settingRouter = {
                     component: () => import('@/views/setting/panel/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.settings',
+                        title: 'setting.panel',
                         requiresAuth: true,
                         activeMenu: '/settings',
                     },
@@ -34,6 +36,8 @@ const settingRouter = {
                     component: () => import('@/views/setting/alert/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.settings',
+                        title: 'xpack.alert.alertNotice',
                         requiresAuth: true,
                         activeMenu: '/settings',
                     },
@@ -44,6 +48,8 @@ const settingRouter = {
                     component: () => import('@/views/setting/backup-account/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.settings',
+                        title: 'setting.backupAccount',
                         requiresAuth: true,
                         activeMenu: '/settings',
                     },
@@ -54,6 +60,8 @@ const settingRouter = {
                     component: () => import('@/views/setting/license/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.settings',
+                        title: 'setting.license',
                         requiresAuth: true,
                         activeMenu: '/settings',
                     },
@@ -64,6 +72,8 @@ const settingRouter = {
                     component: () => import('@/views/setting/about/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.settings',
+                        title: 'setting.about',
                         requiresAuth: true,
                         activeMenu: '/settings',
                     },
@@ -74,6 +84,8 @@ const settingRouter = {
                     component: () => import('@/views/setting/safe/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.settings',
+                        title: 'setting.safe',
                         requiresAuth: true,
                         activeMenu: '/settings',
                     },
@@ -84,6 +96,8 @@ const settingRouter = {
                     hidden: true,
                     component: () => import('@/views/setting/snapshot/index.vue'),
                     meta: {
+                        parent: 'menu.settings',
+                        title: 'setting.snapshot',
                         requiresAuth: true,
                         activeMenu: '/settings',
                     },
diff --git a/frontend/src/routers/modules/toolbox.ts b/frontend/src/routers/modules/toolbox.ts
index eb50c03a5..2242968a4 100644
--- a/frontend/src/routers/modules/toolbox.ts
+++ b/frontend/src/routers/modules/toolbox.ts
@@ -24,6 +24,8 @@ const toolboxRouter = {
                     component: () => import('@/views/toolbox/device/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.toolbox',
+                        title: 'toolbox.device.toolbox',
                         activeMenu: '/toolbox',
                         requiresAuth: false,
                     },
@@ -34,6 +36,8 @@ const toolboxRouter = {
                     component: () => import('@/views/toolbox/supervisor/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.toolbox',
+                        title: 'menu.supervisor',
                         activeMenu: '/toolbox',
                         requiresAuth: false,
                     },
@@ -44,6 +48,8 @@ const toolboxRouter = {
                     component: () => import('@/views/toolbox/clam/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.toolbox',
+                        title: 'toolbox.clam.clam',
                         activeMenu: '/toolbox',
                         requiresAuth: false,
                     },
@@ -54,6 +60,8 @@ const toolboxRouter = {
                     component: () => import('@/views/toolbox/clam/setting/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.toolbox',
+                        title: 'toolbox.device.toolbox',
                         activeMenu: '/toolbox',
                         requiresAuth: false,
                     },
@@ -64,6 +72,8 @@ const toolboxRouter = {
                     component: () => import('@/views/toolbox/ftp/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.toolbox',
+                        title: 'FTP',
                         activeMenu: '/toolbox',
                         requiresAuth: false,
                     },
@@ -74,6 +84,8 @@ const toolboxRouter = {
                     component: () => import('@/views/toolbox/fail2ban/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.toolbox',
+                        title: 'Fail2Ban',
                         activeMenu: '/toolbox',
                         requiresAuth: false,
                     },
@@ -84,6 +96,8 @@ const toolboxRouter = {
                     component: () => import('@/views/toolbox/clean/index.vue'),
                     hidden: true,
                     meta: {
+                        parent: 'menu.toolbox',
+                        title: 'setting.diskClean',
                         activeMenu: '/toolbox',
                         requiresAuth: false,
                     },
diff --git a/frontend/src/routers/modules/website.ts b/frontend/src/routers/modules/website.ts
index dc59c9fef..9a3a00508 100644
--- a/frontend/src/routers/modules/website.ts
+++ b/frontend/src/routers/modules/website.ts
@@ -27,6 +27,8 @@ const webSiteRouter = {
             hidden: true,
             props: true,
             meta: {
+                parent: 'menu.website',
+                title: 'commons.button.',
                 activeMenu: '/websites',
                 requiresAuth: false,
             },
@@ -46,6 +48,7 @@ const webSiteRouter = {
             component: () => import('@/views/website/runtime/php/index.vue'),
             meta: {
                 title: 'menu.runtime',
+                detail: 'PHP',
                 activeMenu: '/websites/runtimes/php',
                 requiresAuth: false,
             },
@@ -56,6 +59,8 @@ const webSiteRouter = {
             hidden: true,
             component: () => import('@/views/website/runtime/node/index.vue'),
             meta: {
+                title: 'menu.runtime',
+                detail: 'Node',
                 activeMenu: '/websites/runtimes/php',
                 requiresAuth: false,
             },
@@ -66,6 +71,8 @@ const webSiteRouter = {
             hidden: true,
             component: () => import('@/views/website/runtime/java/index.vue'),
             meta: {
+                title: 'menu.runtime',
+                detail: 'Java',
                 activeMenu: '/websites/runtimes/php',
                 requiresAuth: false,
             },
@@ -76,6 +83,8 @@ const webSiteRouter = {
             hidden: true,
             component: () => import('@/views/website/runtime/go/index.vue'),
             meta: {
+                title: 'menu.runtime',
+                detail: 'Go',
                 activeMenu: '/websites/runtimes/php',
                 requiresAuth: false,
             },
@@ -86,6 +95,8 @@ const webSiteRouter = {
             hidden: true,
             component: () => import('@/views/website/runtime/python/index.vue'),
             meta: {
+                title: 'menu.runtime',
+                detail: 'Python',
                 activeMenu: '/websites/runtimes/php',
                 requiresAuth: false,
             },
@@ -96,6 +107,8 @@ const webSiteRouter = {
             hidden: true,
             component: () => import('@/views/website/runtime/dotnet/index.vue'),
             meta: {
+                title: 'menu.runtime',
+                detail: '.Net',
                 activeMenu: '/websites/runtimes/php',
                 requiresAuth: false,
             },
diff --git a/frontend/src/utils/router.ts b/frontend/src/utils/router.ts
new file mode 100644
index 000000000..d4bc30303
--- /dev/null
+++ b/frontend/src/utils/router.ts
@@ -0,0 +1,41 @@
+import router from '@/routers';
+import { TabsStore } from '@/store';
+
+export const routerToName = async (name: string) => {
+    await router.push({ name: name });
+    tabStoreMiddleWare();
+};
+
+export const routerToPath = async (path: string) => {
+    await router.push({ path: path });
+    tabStoreMiddleWare();
+};
+
+export const routerToFileWithPath = async (pathItem: string) => {
+    await router.push({ name: 'File', query: { path: pathItem } });
+    tabStoreMiddleWare();
+};
+
+export const routerToNameWithQuery = async (name: string, query: any) => {
+    await router.push({ name: name, query: query });
+    tabStoreMiddleWare();
+};
+
+export const routerToPathWithQuery = async (path: string, query: any) => {
+    await router.push({ path: path, query: query });
+    tabStoreMiddleWare();
+};
+
+export const routerToNameWithParams = async (name: string, params: any) => {
+    await router.push({ name: name, params: params });
+    tabStoreMiddleWare();
+};
+
+const tabStoreMiddleWare = () => {
+    try {
+        const tabsStore = TabsStore();
+        let route = router.currentRoute;
+        tabsStore.addTab(route.value);
+        tabsStore.activeTabPath = route.value?.path;
+    } catch (error) {}
+};
diff --git a/frontend/src/utils/util.ts b/frontend/src/utils/util.ts
index 6ce368d3c..97dddea2f 100644
--- a/frontend/src/utils/util.ts
+++ b/frontend/src/utils/util.ts
@@ -6,6 +6,7 @@ import { MsgError, MsgSuccess } from '@/utils/message';
 import { v4 as uuidv4 } from 'uuid';
 import JSEncrypt from 'jsencrypt';
 import CryptoJS from 'crypto-js';
+import { routerToPathWithQuery } from './router';
 
 export function deepCopy<T>(obj: any): T {
     let newObj: any;
@@ -792,7 +793,7 @@ export async function loadJson(lang: string): Promise<Object> {
 }
 
 export const jumpToPath = (router: any, path: string) => {
-    router.push({ path: path, query: { uncached: 'true' } });
+    routerToPathWithQuery(path, { uncached: 'true' });
 };
 
 export const toLink = (link: string) => {
diff --git a/frontend/src/views/ai/model/index.vue b/frontend/src/views/ai/model/index.vue
index 8046a4228..82e693196 100644
--- a/frontend/src/views/ai/model/index.vue
+++ b/frontend/src/views/ai/model/index.vue
@@ -202,9 +202,9 @@ import {
 import { AI } from '@/api/interface/ai';
 import { getAppPort } from '@/api/modules/app';
 import { dateFormat, newUUID } from '@/utils/util';
-import router from '@/routers';
 import { MsgInfo, MsgSuccess } from '@/utils/message';
 import BindDomain from '@/views/ai/model/domain/index.vue';
+import { routerToNameWithQuery } from '@/utils/router';
 const globalStore = GlobalStore();
 
 const loading = ref(false);
@@ -322,7 +322,7 @@ const bindDomain = () => {
 };
 
 const goInstall = (name: string) => {
-    router.push({ name: 'AppAll', query: { install: name } });
+    routerToNameWithQuery('AppAll', { install: name });
 };
 
 const loadWebUIPort = async () => {
diff --git a/frontend/src/views/app-store/detail/install/index.vue b/frontend/src/views/app-store/detail/install/index.vue
index 78e852476..7d8a5ffe0 100644
--- a/frontend/src/views/app-store/detail/install/index.vue
+++ b/frontend/src/views/app-store/detail/install/index.vue
@@ -139,6 +139,7 @@ import CodemirrorPro from '@/components/codemirror-pro/index.vue';
 import TaskLog from '@/components/log/task/index.vue';
 import { newUUID } from '@/utils/util';
 import { computeSizeFromMB } from '@/utils/util';
+import { routerToName } from '@/utils/router';
 
 interface InstallRrops {
     params?: App.AppParams;
@@ -192,7 +193,7 @@ const handleClose = () => {
     open.value = false;
     resetForm();
     if (router.currentRoute.value.query.install) {
-        router.push({ name: 'AppAll' });
+        routerToName('AppAll');
     }
 };
 const paramKey = ref(1);
diff --git a/frontend/src/views/app-store/installed/check/index.vue b/frontend/src/views/app-store/installed/check/index.vue
index 678f3581e..7571c89bc 100644
--- a/frontend/src/views/app-store/installed/check/index.vue
+++ b/frontend/src/views/app-store/installed/check/index.vue
@@ -51,9 +51,8 @@ import { App } from '@/api/interface/app';
 import { installedOp } from '@/api/modules/app';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+import { routerToName } from '@/utils/router';
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-const router = useRouter();
 
 interface CheckRrops {
     items: App.AppInstallResource[];
@@ -94,10 +93,10 @@ const toPage = (key: string) => {
         open.value = false;
     }
     if (key === 'website') {
-        router.push({ name: 'Website' });
+        routerToName('Website');
     }
     if (key === 'database') {
-        router.push({ name: 'MySQL' });
+        routerToName('MySQL');
     }
 };
 
diff --git a/frontend/src/views/app-store/installed/index.vue b/frontend/src/views/app-store/installed/index.vue
index 7f5520371..47c804d74 100644
--- a/frontend/src/views/app-store/installed/index.vue
+++ b/frontend/src/views/app-store/installed/index.vue
@@ -106,7 +106,7 @@
                                                                     <el-button
                                                                         type="primary"
                                                                         link
-                                                                        @click="toFolder(installed.path)"
+                                                                        @click="routerToFileWithPath(installed.path)"
                                                                     >
                                                                         <el-icon>
                                                                             <FolderOpened />
@@ -427,13 +427,13 @@ import Status from '@/components/status/index.vue';
 import { getAge, jumpToPath, toLink } from '@/utils/util';
 import { useRouter } from 'vue-router';
 import { MsgSuccess } from '@/utils/message';
-import { toFolder } from '@/global/business';
 import TaskLog from '@/components/log/task/index.vue';
 import Detail from '@/views/app-store/detail/index.vue';
 import IgnoreApp from '@/views/app-store/installed/ignore/create/index.vue';
 import { getAgentSettingByKey } from '@/api/modules/setting';
 import Tags from '@/views/app-store/components/tag.vue';
 import SvgIcon from '@/components/svg-icon/svg-icon.vue';
+import { routerToFileWithPath } from '@/utils/router';
 
 const data = ref<any>();
 const loading = ref(false);
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index 117be8392..a86184915 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -100,7 +100,7 @@ import { inspect, searchCompose } from '@/api/modules/container';
 import DockerStatus from '@/views/container/docker-status/index.vue';
 import i18n from '@/lang';
 import { Container } from '@/api/interface/container';
-import router from '@/routers';
+import { routerToFileWithPath } from '@/utils/router';
 
 const data = ref();
 const selects = ref<any>([]);
@@ -120,7 +120,7 @@ const isActive = ref(false);
 const isExist = ref(false);
 
 const toComposeFolder = async (row: Container.ComposeInfo) => {
-    router.push({ path: '/hosts/files', query: { path: row.workdir } });
+    routerToFileWithPath(row.workdir);
 };
 
 const search = async () => {
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index e75bf8c8e..a1c2d9808 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -255,12 +255,7 @@
                                     :content="$t('app.app') + ': ' + row.appName + '[' + row.appInstallName + ']'"
                                     placement="top"
                                 >
-                                    <el-button
-                                        icon="Position"
-                                        plain
-                                        size="small"
-                                        @click="router.push({ name: 'AppInstalled' })"
-                                    >
+                                    <el-button icon="Position" plain size="small" @click="routerToName('AppInstalled')">
                                         {{ $t('app.app') }}: {{ row.appName }} [{{ row.appInstallName }}]
                                     </el-button>
                                 </el-tooltip>
@@ -273,12 +268,7 @@
                                     placement="top"
                                     class="mt-1"
                                 >
-                                    <el-button
-                                        icon="Position"
-                                        plain
-                                        size="small"
-                                        @click="router.push({ name: 'Website' })"
-                                    >
+                                    <el-button icon="Position" plain size="small" @click="routerToName('Website')">
                                         {{ $t('menu.website') }}:
                                         {{ row.websites.join(',') }}
                                     </el-button>
@@ -383,9 +373,9 @@ import {
 } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
 import i18n from '@/lang';
-import router from '@/routers';
 import { MsgWarning } from '@/utils/message';
 import { GlobalStore } from '@/store';
+import { routerToName, routerToNameWithQuery } from '@/utils/router';
 const globalStore = GlobalStore();
 
 const mobile = computed(() => {
@@ -604,7 +594,7 @@ function loadMemValue(t: number) {
 }
 
 const onContainerOperate = async (containerID: string) => {
-    router.push({ name: 'ContainerCreate', query: { containerID: containerID } });
+    routerToNameWithQuery('ContainerCreate', { containerID: containerID });
 };
 
 const dialogMonitorRef = ref();
diff --git a/frontend/src/views/container/container/operate/index.vue b/frontend/src/views/container/container/operate/index.vue
index ee2da992f..3c01440fa 100644
--- a/frontend/src/views/container/container/operate/index.vue
+++ b/frontend/src/views/container/container/operate/index.vue
@@ -455,6 +455,7 @@ import TaskLog from '@/components/log/task/index.vue';
 import { checkIpV4V6, checkPort, newUUID } from '@/utils/util';
 import router from '@/routers';
 import TerminalDialog from '@/views/host/file-management/terminal/index.vue';
+import { routerToName } from '@/utils/router';
 
 const loading = ref(false);
 const isCreate = ref();
@@ -584,7 +585,7 @@ type FormInstance = InstanceType<typeof ElForm>;
 const formRef = ref<FormInstance>();
 
 const goBack = () => {
-    router.push({ name: 'ContainerItem' });
+    routerToName('ContainerItem');
 };
 const closeTask = () => {
     taskLogRef.value.handleClose();
@@ -609,7 +610,7 @@ const handlePortsDelete = (index: number) => {
 };
 
 const goRouter = async () => {
-    router.push({ name: 'AppInstalled' });
+    routerToName('AppInstalled');
 };
 
 const handleVolumesAdd = () => {
diff --git a/frontend/src/views/container/dashboard/index.vue b/frontend/src/views/container/dashboard/index.vue
index 918c21cff..e9319ea48 100644
--- a/frontend/src/views/container/dashboard/index.vue
+++ b/frontend/src/views/container/dashboard/index.vue
@@ -10,7 +10,7 @@
         <div v-if="isExist" :class="{ mask: !isActive }">
             <CardWithHeader :header="$t('menu.container')" class="card-interval">
                 <template #body>
-                    <span class="count" @click="goRouter('ContainerItem')">{{ countItem.containerCount }}</span>
+                    <span class="count" @click="routerToName('ContainerItem')">{{ countItem.containerCount }}</span>
                 </template>
                 <template #header-l>
                     <el-tag size="small" class="ml-5" v-if="countItem.all" effect="plain">
@@ -43,14 +43,14 @@
                 <el-col :span="8">
                     <CardWithHeader :header="$t('container.compose')">
                         <template #body>
-                            <span class="count" @click="goRouter('Compose')">{{ countItem.composeCount }}</span>
+                            <span class="count" @click="routerToName('Compose')">{{ countItem.composeCount }}</span>
                         </template>
                     </CardWithHeader>
                 </el-col>
                 <el-col :span="8">
                     <CardWithHeader :header="$t('container.composeTemplate')">
                         <template #body>
-                            <span class="count" @click="goRouter('ComposeTemplate')">
+                            <span class="count" @click="routerToName('ComposeTemplate')">
                                 {{ countItem.composeTemplateCount }}
                             </span>
                         </template>
@@ -59,7 +59,7 @@
                 <el-col :span="8">
                     <CardWithHeader :header="$t('container.image')">
                         <template #body>
-                            <span class="count" @click="goRouter('Image')">{{ countItem.imageCount }}</span>
+                            <span class="count" @click="routerToName('Image')">{{ countItem.imageCount }}</span>
                         </template>
                         <template #header-l>
                             <span v-if="countItem.imageSize" effect="plain" class="ml-2 text-xs">
@@ -73,21 +73,21 @@
                 <el-col :span="8">
                     <CardWithHeader :header="$t('container.imageRepo')">
                         <template #body>
-                            <span class="count" @click="goRouter('Repo')">{{ countItem.repoCount }}</span>
+                            <span class="count" @click="routerToName('Repo')">{{ countItem.repoCount }}</span>
                         </template>
                     </CardWithHeader>
                 </el-col>
                 <el-col :span="8">
                     <CardWithHeader :header="$t('container.network')">
                         <template #body>
-                            <span class="count" @click="goRouter('Network')">{{ countItem.networkCount }}</span>
+                            <span class="count" @click="routerToName('Network')">{{ countItem.networkCount }}</span>
                         </template>
                     </CardWithHeader>
                 </el-col>
                 <el-col :span="8">
                     <CardWithHeader :header="$t('container.volume')">
                         <template #body>
-                            <span class="count" @click="goRouter('Volume')">{{ countItem.volumeCount }}</span>
+                            <span class="count" @click="routerToName('Volume')">{{ countItem.volumeCount }}</span>
                         </template>
                     </CardWithHeader>
                 </el-col>
@@ -106,7 +106,7 @@
                             </div>
                         </el-descriptions-item>
                     </el-descriptions>
-                    <el-button class="mt-2" type="primary" link @click="goRouter('ContainerSetting')">
+                    <el-button class="mt-2" type="primary" link @click="routerToName('ContainerSetting')">
                         <el-icon class="mr-1"><Position /></el-icon>
                         {{ $t('container.goSetting') }}
                     </el-button>
@@ -120,8 +120,8 @@
 import { loadContainerStatus, loadDaemonJson } from '@/api/modules/container';
 import DockerStatus from '@/views/container/docker-status/index.vue';
 import { getSettingInfo } from '@/api/modules/setting';
-import router from '@/routers';
 import { computeSize } from '@/utils/util';
+import { routerToName } from '@/utils/router';
 import { onMounted, reactive, ref } from 'vue';
 
 const loading = ref();
@@ -188,10 +188,6 @@ const loadContainerSetting = async () => {
     countItem.sockPath = settingRes.data.dockerSockPath || 'unix:///var/run/docker.sock';
 };
 
-const goRouter = async (val: string) => {
-    router.push({ name: val });
-};
-
 onMounted(() => {
     search();
 });
diff --git a/frontend/src/views/container/docker-status/index.vue b/frontend/src/views/container/docker-status/index.vue
index f0d0b261b..d202f9c37 100644
--- a/frontend/src/views/container/docker-status/index.vue
+++ b/frontend/src/views/container/docker-status/index.vue
@@ -13,7 +13,7 @@
 import { onMounted, ref } from 'vue';
 import { loadDockerStatus } from '@/api/modules/container';
 import NoSuchService from '@/components/layout-content/no-such-service.vue';
-import router from '@/routers';
+import { routerToName } from '@/utils/router';
 
 const prop = defineProps({
     isHide: Boolean,
@@ -42,7 +42,7 @@ const loadStatus = async () => {
 };
 
 const goSetting = async () => {
-    router.push({ name: 'ContainerSetting' });
+    routerToName('ContainerSetting');
 };
 
 onMounted(() => {
diff --git a/frontend/src/views/container/volume/index.vue b/frontend/src/views/container/volume/index.vue
index 6edeff0a2..df77f7abf 100644
--- a/frontend/src/views/container/volume/index.vue
+++ b/frontend/src/views/container/volume/index.vue
@@ -49,7 +49,7 @@
                     </el-table-column>
                     <el-table-column :label="$t('container.volumeDir')" min-width="100">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="toFolder(row.mountpoint)">
+                            <el-button type="primary" link @click="routerToFileWithPath(row.mountpoint)">
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -97,9 +97,9 @@ import { deleteVolume, searchVolume, inspect, containerPrune } from '@/api/modul
 import { Container } from '@/api/interface/container';
 import TaskLog from '@/components/log/task/index.vue';
 import i18n from '@/lang';
-import router from '@/routers';
 import { ElMessageBox } from 'element-plus';
 import { GlobalStore } from '@/store';
+import { routerToFileWithPath } from '@/utils/router';
 const globalStore = GlobalStore();
 
 const taskLogRef = ref();
@@ -124,9 +124,6 @@ const searchName = ref();
 const isActive = ref(false);
 const isExist = ref(false);
 
-const toFolder = (folder: string) => {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-};
 const dialogCreateRef = ref<DialogExpose>();
 
 interface DialogExpose {
diff --git a/frontend/src/views/cronjob/cronjob/index.vue b/frontend/src/views/cronjob/cronjob/index.vue
index 893735ade..4358904c1 100644
--- a/frontend/src/views/cronjob/cronjob/index.vue
+++ b/frontend/src/views/cronjob/cronjob/index.vue
@@ -235,9 +235,9 @@ import { ElMessageBox } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import { hasBackup, transSpecToStr } from './helper';
 import { GlobalStore } from '@/store';
-import router from '@/routers';
 import { getCurrentDateFormatted } from '@/utils/util';
 import { getGroupList } from '@/api/modules/group';
+import { routerToNameWithQuery } from '@/utils/router';
 
 const globalStore = GlobalStore();
 const mobile = computed(() => {
@@ -304,7 +304,7 @@ const dialogRecordRef = ref();
 const dialogBackupRef = ref();
 
 const onOpenDialog = async (id: string) => {
-    router.push({ name: 'CronjobOperate', query: { id: id } });
+    routerToNameWithQuery('CronjobOperate', { id: id });
 };
 
 const onDelete = async (row: Cronjob.CronjobInfo | null) => {
diff --git a/frontend/src/views/cronjob/cronjob/operate/index.vue b/frontend/src/views/cronjob/cronjob/operate/index.vue
index 5ddae63fe..85372de9d 100644
--- a/frontend/src/views/cronjob/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/cronjob/operate/index.vue
@@ -775,6 +775,7 @@ import { GlobalStore } from '@/store';
 import LicenseImport from '@/components/license-import/index.vue';
 import { transferTimeToSecond } from '@/utils/util';
 import { getGroupList } from '@/api/modules/group';
+import { routerToName, routerToPath } from '@/utils/router';
 const router = useRouter();
 
 const globalStore = GlobalStore();
@@ -953,7 +954,7 @@ const search = async () => {
 };
 
 const goRouter = async (path: string) => {
-    router.push({ path: path });
+    routerToPath(path);
 };
 
 const containerOptions = ref([]);
@@ -1156,7 +1157,7 @@ const loadGroups = async () => {
 };
 
 const goBack = () => {
-    router.push({ name: 'CronjobItem' });
+    routerToName('CronjobItem');
 };
 
 const loadFile = async (path: string) => {
diff --git a/frontend/src/views/database/mysql/check/index.vue b/frontend/src/views/database/mysql/check/index.vue
index f500bf660..4d9df5b89 100644
--- a/frontend/src/views/database/mysql/check/index.vue
+++ b/frontend/src/views/database/mysql/check/index.vue
@@ -25,9 +25,8 @@
     </DialogPro>
 </template>
 <script lang="ts" setup>
+import { routerToName } from '@/utils/router';
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-const router = useRouter();
 
 interface InstallProps {
     items: Array<string>;
@@ -41,7 +40,7 @@ const acceptParams = (props: InstallProps) => {
 };
 
 const toApp = () => {
-    router.push({ name: 'AppInstalled' });
+    routerToName('AppInstalled');
 };
 
 defineExpose({
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 572060b75..6b39f84ea 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -282,9 +282,9 @@ import i18n from '@/lang';
 import { Database } from '@/api/interface/database';
 import { App } from '@/api/interface/app';
 import { getAppPort } from '@/api/modules/app';
-import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
+import { routerToName, routerToNameWithParams, routerToNameWithQuery } from '@/utils/router';
 const globalStore = GlobalStore();
 
 const mobile = computed(() => {
@@ -367,7 +367,7 @@ const goRemoteDB = async () => {
     if (currentDB.value) {
         globalStore.setCurrentDB(currentDB.value.database);
     }
-    router.push({ name: 'MySQL-Remote' });
+    routerToName('MySQL-Remote');
 };
 
 const passwordRef = ref();
@@ -376,7 +376,7 @@ const onSetting = async () => {
     if (currentDB.value) {
         globalStore.setCurrentDB(currentDB.value.database);
     }
-    router.push({ name: 'MySQL-Setting', params: { type: currentDB.value.type, database: currentDB.value.database } });
+    routerToNameWithParams('MySQL-Setting', { type: currentDB.value.type, database: currentDB.value.database });
 };
 
 const changeDatabase = async () => {
@@ -441,10 +441,10 @@ const loadDB = async () => {
 
 const goRouter = async (target: string) => {
     if (target === 'app') {
-        router.push({ name: 'AppAll', query: { install: 'mysql' } });
+        routerToNameWithQuery('AppAll', { install: 'mysql' });
         return;
     }
-    router.push({ name: 'MySQL-Remote' });
+    routerToName('MySQL-Remote');
 };
 
 const onChange = async (info: any) => {
@@ -473,7 +473,7 @@ const goDashboard = async (name: string) => {
 };
 
 const getAppDetail = () => {
-    router.push({ name: 'AppAll', query: { install: dashboardKey.value } });
+    routerToNameWithQuery('AppAll', { install: dashboardKey.value });
 };
 
 const loadPhpMyAdminPort = async () => {
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index 06cab7b69..3da620748 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -132,8 +132,8 @@ import { changePort, checkAppInstalled, getAppDefaultConfig } from '@/api/module
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import router from '@/routers';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
+import { routerToName } from '@/utils/router';
 
 const loading = ref(false);
 
@@ -323,7 +323,7 @@ const loadMysqlConf = async () => {
 };
 
 const goUpgrade = () => {
-    router.push({ name: 'AppUpgrade' });
+    routerToName('AppUpgrade');
 };
 
 const onLoadInfo = async () => {
diff --git a/frontend/src/views/database/postgresql/check/index.vue b/frontend/src/views/database/postgresql/check/index.vue
index f9be4d998..f3dcd79b0 100644
--- a/frontend/src/views/database/postgresql/check/index.vue
+++ b/frontend/src/views/database/postgresql/check/index.vue
@@ -25,9 +25,8 @@
     </DialogPro>
 </template>
 <script lang="ts" setup>
+import { routerToName } from '@/utils/router';
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-const router = useRouter();
 
 interface InstallProps {
     items: Array<string>;
@@ -41,7 +40,7 @@ const acceptParams = (props: InstallProps) => {
 };
 
 const toApp = () => {
-    router.push({ name: 'AppInstalled' });
+    routerToName('AppInstalled');
 };
 
 defineExpose({
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index 8db62d205..02f90e264 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -249,9 +249,9 @@ import i18n from '@/lang';
 import { Database } from '@/api/interface/database';
 import { App } from '@/api/interface/app';
 import { getAppPort } from '@/api/modules/app';
-import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
+import { routerToName, routerToNameWithParams, routerToNameWithQuery } from '@/utils/router';
 const globalStore = GlobalStore();
 
 const mobile = computed(() => {
@@ -326,7 +326,7 @@ const goRemoteDB = async () => {
     if (currentDB.value) {
         globalStore.setCurrentDB(currentDB.value.database);
     }
-    router.push({ name: 'PostgreSQL-Remote' });
+    routerToName('PostgreSQL-Remote');
 };
 
 const passwordRef = ref();
@@ -335,10 +335,7 @@ const onSetting = async () => {
     if (currentDB.value) {
         globalStore.setCurrentDB(currentDB.value.database);
     }
-    router.push({
-        name: 'PostgreSQL-Setting',
-        params: { type: currentDB.value.type, database: currentDB.value.database },
-    });
+    routerToNameWithParams('PostgreSQL-Setting', { type: currentDB.value.type, database: currentDB.value.database });
 };
 
 const changeDatabase = async () => {
@@ -406,10 +403,10 @@ const loadDB = async () => {
 
 const goRouter = async (target: string) => {
     if (target === 'app') {
-        router.push({ name: 'AppAll', query: { install: 'postgresql' } });
+        routerToNameWithQuery('AppAll', { install: 'postgresql' });
         return;
     }
-    router.push({ name: 'PostgreSQL-Remote' });
+    routerToName('PostgreSQL-Remote');
 };
 
 const onChange = async (info: any) => {
@@ -429,7 +426,7 @@ const goDashboard = async () => {
 };
 
 const getAppDetail = () => {
-    router.push({ name: 'AppAll', query: { install: dashboardKey.value } });
+    routerToNameWithQuery('AppAll', { install: dashboardKey.value });
 };
 
 const loadPGAdminPort = async () => {
diff --git a/frontend/src/views/database/postgresql/setting/index.vue b/frontend/src/views/database/postgresql/setting/index.vue
index 926234343..38e51eae4 100644
--- a/frontend/src/views/database/postgresql/setting/index.vue
+++ b/frontend/src/views/database/postgresql/setting/index.vue
@@ -82,8 +82,8 @@ import { changePort, checkAppInstalled } from '@/api/modules/app';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
-import router from '@/routers';
 import CodemirrorPro from '@/components/codemirror-pro/index.vue';
+import { routerToName } from '@/utils/router';
 
 const loading = ref(false);
 
@@ -205,7 +205,7 @@ const loadPostgresqlConf = async () => {
 };
 
 const goUpgrade = () => {
-    router.push({ name: 'AppUpgrade' });
+    routerToName('AppUpgrade');
 };
 
 const onLoadInfo = async () => {
diff --git a/frontend/src/views/database/redis/check/index.vue b/frontend/src/views/database/redis/check/index.vue
index f9be4d998..f3dcd79b0 100644
--- a/frontend/src/views/database/redis/check/index.vue
+++ b/frontend/src/views/database/redis/check/index.vue
@@ -25,9 +25,8 @@
     </DialogPro>
 </template>
 <script lang="ts" setup>
+import { routerToName } from '@/utils/router';
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-const router = useRouter();
 
 interface InstallProps {
     items: Array<string>;
@@ -41,7 +40,7 @@ const acceptParams = (props: InstallProps) => {
 };
 
 const toApp = () => {
-    router.push({ name: 'AppInstalled' });
+    routerToName('AppInstalled');
 };
 
 defineExpose({
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index 7ea1ad0eb..dcb908e33 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -145,13 +145,13 @@ import AppStatus from '@/components/app-status/index.vue';
 import QuickCmd from '@/views/database/redis/command/index.vue';
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
 import { checkAppInstalled } from '@/api/modules/app';
-import router from '@/routers';
 import { GlobalStore } from '@/store';
 import { listDatabases, checkRedisCli, installRedisCli } from '@/api/modules/database';
 import { Database } from '@/api/interface/database';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
 import { getCommandList } from '@/api/modules/command';
+import { routerToName, routerToNameWithQuery } from '@/utils/router';
 const globalStore = GlobalStore();
 
 const loading = ref(false);
@@ -196,13 +196,13 @@ const loadHeight = () => {
 };
 
 const getAppDetail = (key: string) => {
-    router.push({ name: 'AppAll', query: { install: key } });
+    routerToNameWithQuery('AppAll', { install: key });
 };
 const goRemoteDB = async () => {
     if (currentDB.value) {
         globalStore.setCurrentRedisDB(currentDBName.value);
     }
-    router.push({ name: 'Redis-Remote' });
+    routerToName('Redis-Remote');
 };
 
 const connRef = ref();
@@ -216,10 +216,10 @@ const onLoadConn = async () => {
 
 const goRouter = async (target: string) => {
     if (target === 'app') {
-        router.push({ name: 'AppAll', query: { install: 'redis' } });
+        routerToNameWithQuery('AppAll', { install: 'redis' });
         return;
     }
-    router.push({ name: 'Redis-Remote' });
+    routerToName('Redis-Remote');
 };
 
 const changeDatabase = async () => {
diff --git a/frontend/src/views/home/app/index.vue b/frontend/src/views/home/app/index.vue
index fadf45012..1a44d1fc9 100644
--- a/frontend/src/views/home/app/index.vue
+++ b/frontend/src/views/home/app/index.vue
@@ -100,7 +100,7 @@
                                             size="small"
                                             type="primary"
                                             link
-                                            @click="toFolder(app.currentRow.path)"
+                                            @click="routerToFileWithPath(app.currentRow.path)"
                                         >
                                             {{ $t('home.dir') }}
                                         </el-button>
@@ -187,9 +187,9 @@ import { GlobalStore } from '@/store';
 import { MsgSuccess } from '@/utils/message';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { toFolder } from '@/global/business';
 import { jumpToPath } from '@/utils/util';
 import { jumpToInstall } from '@/utils/app';
+import { routerToFileWithPath, routerToNameWithQuery } from '@/utils/router';
 
 const router = useRouter();
 const globalStore = GlobalStore();
@@ -211,7 +211,7 @@ const acceptParams = (): void => {
 
 const goInstall = (key: string, type: string) => {
     if (!jumpToInstall(type, key)) {
-        router.push({ name: 'AppAll', query: { install: key } });
+        routerToNameWithQuery('AppAll', { install: key });
     }
 };
 
diff --git a/frontend/src/views/home/status/index.vue b/frontend/src/views/home/status/index.vue
index 239175770..faea5ddb8 100644
--- a/frontend/src/views/home/status/index.vue
+++ b/frontend/src/views/home/status/index.vue
@@ -157,7 +157,7 @@
                     </el-row>
                     <template #reference>
                         <v-charts
-                            @click="toFolder(item.path)"
+                            @click="routerToFileWithPath(item.path)"
                             height="160px"
                             :id="`disk${index}`"
                             type="pie"
@@ -267,10 +267,9 @@
 <script setup lang="ts">
 import { Dashboard } from '@/api/interface/dashboard';
 import { computeSize } from '@/utils/util';
-import router from '@/routers';
 import i18n from '@/lang';
 import { nextTick, ref } from 'vue';
-import { toFolder } from '@/global/business';
+import { routerToFileWithPath, routerToName } from '@/utils/router';
 const showMore = ref(false);
 const totalCount = ref();
 
@@ -424,7 +423,7 @@ function loadStatus(val: number) {
 }
 
 const goGPU = () => {
-    router.push({ name: 'GPU' });
+    routerToName('GPU');
 };
 
 const loadWidth = () => {
diff --git a/frontend/src/views/host/firewall/port/index.vue b/frontend/src/views/host/firewall/port/index.vue
index 8158fe1b5..08cd7651c 100644
--- a/frontend/src/views/host/firewall/port/index.vue
+++ b/frontend/src/views/host/firewall/port/index.vue
@@ -155,7 +155,7 @@ import { Host } from '@/api/interface/host';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';
-import router from '@/routers';
+import { routerToName } from '@/utils/router';
 
 const loading = ref();
 const activeTag = ref('port');
@@ -226,7 +226,7 @@ const onOpenDialog = async (
 };
 
 const quickJump = () => {
-    router.push({ name: 'AppInstalled' });
+    routerToName('AppInstalled');
 };
 
 const onChangeStatus = async (row: Host.RuleInfo, status: string) => {
diff --git a/frontend/src/views/log/router/index.vue b/frontend/src/views/log/router/index.vue
index f106da5a5..fecef37e5 100644
--- a/frontend/src/views/log/router/index.vue
+++ b/frontend/src/views/log/router/index.vue
@@ -35,7 +35,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
+import { routerToName } from '@/utils/router';
 
 defineProps({
     current: {
@@ -43,8 +43,7 @@ defineProps({
         default: 'LoginLog',
     },
 });
-const router = useRouter();
 const onChangeRoute = async (addr: string) => {
-    router.push({ name: addr });
+    routerToName(addr);
 };
 </script>
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index 76cfcf1dc..83dfaf805 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -190,6 +190,7 @@ import { MsgError, MsgSuccess } from '@/utils/message';
 import { useI18n } from 'vue-i18n';
 import { encryptPassword } from '@/utils/util';
 import { getXpackSettingForTheme } from '@/utils/xpack';
+import { routerToName } from '@/utils/router';
 
 const i18n = useI18n();
 const themeConfig = computed(() => globalStore.themeConfig);
@@ -346,7 +347,7 @@ const login = (formEl: FormInstance | undefined) => {
             tabsStore.removeAllTabs();
             globalStore.currentNode = 'local';
             MsgSuccess(i18n.t('commons.msg.loginSuccess'));
-            router.push({ name: 'home' });
+            routerToName('home');
             document.onkeydown = null;
         } catch (res) {
             if (res.code === 401) {
@@ -387,7 +388,7 @@ const mfaLogin = async (auto: boolean) => {
             tabsStore.removeAllTabs();
             MsgSuccess(i18n.t('commons.msg.loginSuccess'));
             globalStore.currentNode = 'local';
-            router.push({ name: 'home' });
+            routerToName('home');
             document.onkeydown = null;
         } catch (res) {
             if (res.code === 401) {
diff --git a/frontend/src/views/setting/alert/dash/task/index.vue b/frontend/src/views/setting/alert/dash/task/index.vue
index a46bfa01e..369a8bb90 100644
--- a/frontend/src/views/setting/alert/dash/task/index.vue
+++ b/frontend/src/views/setting/alert/dash/task/index.vue
@@ -330,9 +330,9 @@ import { MsgSuccess } from '@/utils/message';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { getSettingInfo } from '@/api/modules/setting';
-import router from '@/routers';
 import { GlobalStore } from '@/store';
 import { storeToRefs } from 'pinia';
+import { routerToName } from '@/utils/router';
 
 const globalStore = GlobalStore();
 const { isMaster } = storeToRefs(globalStore);
@@ -721,7 +721,7 @@ const isEver = (time: string) => {
 
 const quickJump = (name: string) => {
     handleClose();
-    router.push({ name: name });
+    routerToName(name);
 };
 
 defineExpose({
diff --git a/frontend/src/views/setting/expired.vue b/frontend/src/views/setting/expired.vue
index 0db05021b..7847d43d7 100644
--- a/frontend/src/views/setting/expired.vue
+++ b/frontend/src/views/setting/expired.vue
@@ -51,8 +51,8 @@ import { getSettingInfo, handleExpired } from '@/api/modules/setting';
 import { ElForm } from 'element-plus';
 import i18n from '@/lang';
 import { Rules } from '@/global/form-rules';
-import router from '@/routers';
 import { MsgError, MsgSuccess } from '@/utils/message';
+import { routerToName } from '@/utils/router';
 
 let isComplexity = ref(false);
 
@@ -90,7 +90,7 @@ const submitChangePassword = async (formEl: FormInstance | undefined) => {
         }
         await handleExpired({ oldPassword: passForm.oldPass, newPassword: password });
         MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-        router.push({ name: 'home' });
+        routerToName('home');
     });
 };
 const search = async () => {
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index a0b2d9d62..06a68de8d 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -212,7 +212,6 @@ import {
     getAgentSettingInfo,
 } from '@/api/modules/setting';
 import { GlobalStore } from '@/store';
-import { useI18n } from 'vue-i18n';
 import { useTheme } from '@/global/use-theme';
 import { MsgSuccess } from '@/utils/message';
 import ThemeColor from '@/views/setting/panel/theme-color/index.vue';
@@ -227,9 +226,9 @@ import HideMenu from '@/views/setting/panel/hidemenu/index.vue';
 import { storeToRefs } from 'pinia';
 import { getXpackSetting, updateXpackSettingByKey } from '@/utils/xpack';
 import { setPrimaryColor } from '@/utils/theme';
+import i18n from '@/lang';
 
 const loading = ref(false);
-const i18n = useI18n();
 const globalStore = GlobalStore();
 
 const { isMasterProductPro, isMaster } = storeToRefs(globalStore);
@@ -289,7 +288,7 @@ const timeoutRef = ref();
 const hideMenuRef = ref();
 const themeColorRef = ref();
 const apiInterfaceRef = ref();
-const unset = ref(i18n.t('setting.unSetting'));
+const unset = ref(i18n.global.t('setting.unSetting'));
 
 const languageOptions = ref([
     { value: 'zh', label: '中文(简体)' },
@@ -400,9 +399,9 @@ const onChangeApiInterfaceStatus = async () => {
         });
         return;
     }
-    ElMessageBox.confirm(i18n.t('setting.apiInterfaceClose'), i18n.t('setting.apiInterface'), {
-        confirmButtonText: i18n.t('commons.button.confirm'),
-        cancelButtonText: i18n.t('commons.button.cancel'),
+    ElMessageBox.confirm(i18n.global.t('setting.apiInterfaceClose'), i18n.global.t('setting.apiInterface'), {
+        confirmButtonText: i18n.global.t('commons.button.confirm'),
+        cancelButtonText: i18n.global.t('commons.button.cancel'),
     })
         .then(async () => {
             loading.value = true;
@@ -417,7 +416,7 @@ const onChangeApiInterfaceStatus = async () => {
                 .then(() => {
                     loading.value = false;
                     search();
-                    MsgSuccess(i18n.t('commons.msg.operationSuccess'));
+                    MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
                 })
                 .catch(() => {
                     loading.value = false;
@@ -454,7 +453,7 @@ const onSave = async (key: string, val: any) => {
     await updateSetting(param)
         .then(() => {
             if (key === 'Language') {
-                i18n.locale.value = val;
+                i18n.global.locale.value = val;
                 globalStore.updateLanguage(val);
                 location.reload();
             }
@@ -464,7 +463,7 @@ const onSave = async (key: string, val: any) => {
             if (key === 'MenuTabs') {
                 globalStore.setOpenMenuTabs(val === 'Enable');
             }
-            MsgSuccess(i18n.t('commons.msg.operationSuccess'));
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
             search();
             loading.value = false;
         })
diff --git a/frontend/src/views/setting/snapshot/import/index.vue b/frontend/src/views/setting/snapshot/import/index.vue
index a2c752d46..9874e2b49 100644
--- a/frontend/src/views/setting/snapshot/import/index.vue
+++ b/frontend/src/views/setting/snapshot/import/index.vue
@@ -50,8 +50,8 @@ import { snapshotImport } from '@/api/modules/setting';
 import { listBackupOptions, getFilesFromBackup } from '@/api/modules/backup';
 import { Rules } from '@/global/form-rules';
 import { MsgError, MsgSuccess } from '@/utils/message';
-import router from '@/routers';
 import { checkFile } from '@/api/modules/files';
+import { routerToFileWithPath } from '@/utils/router';
 
 const drawerVisible = ref(false);
 const loading = ref();
@@ -101,7 +101,7 @@ const checkDisable = (val: string) => {
 const toFolder = async () => {
     const res = await checkFile(backupPath.value, true);
     if (res.data) {
-        router.push({ path: '/hosts/files', query: { path: backupPath.value } });
+        routerToFileWithPath(backupPath.value);
     } else {
         MsgError(i18n.global.t('file.noSuchFile'));
     }
diff --git a/frontend/src/views/toolbox/clam/index.vue b/frontend/src/views/toolbox/clam/index.vue
index e95899abf..651541308 100644
--- a/frontend/src/views/toolbox/clam/index.vue
+++ b/frontend/src/views/toolbox/clam/index.vue
@@ -64,7 +64,9 @@
                         show-overflow-tooltip
                     >
                         <template #default="{ row }">
-                            <el-button link type="primary" @click="toFolder(row.path)">{{ row.path }}</el-button>
+                            <el-button link type="primary" @click="routerToFileWithPath(row.path)">
+                                {{ row.path }}
+                            </el-button>
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -111,7 +113,7 @@
                                 v-if="row.infectedStrategy === 'copy' || row.infectedStrategy === 'move'"
                                 link
                                 type="primary"
-                                @click="toFolder(row.infectedDir + '/1panel-infected/' + row.name)"
+                                @click="routerToFileWithPath(row.infectedDir + '/1panel-infected/' + row.name)"
                             >
                                 {{ row.infectedDir + '/1panel-infected/' + row.name }}
                             </el-button>
@@ -170,10 +172,10 @@ import LogDialog from '@/views/toolbox/clam/record/index.vue';
 import ClamStatus from '@/views/toolbox/clam/status/index.vue';
 import SettingDialog from '@/views/toolbox/clam/setting/index.vue';
 import { Toolbox } from '@/api/interface/toolbox';
-import router from '@/routers';
 import { transSpecToStr } from '@/views/cronjob/cronjob/helper';
 import { GlobalStore } from '@/store';
 import { storeToRefs } from 'pinia';
+import { routerToFileWithPath, routerToName } from '@/utils/router';
 
 const loading = ref();
 const selects = ref<any>([]);
@@ -230,17 +232,13 @@ const search = async (column?: any) => {
 };
 
 const setting = () => {
-    router.push({ name: 'Clam-Setting' });
+    routerToName('Clam-Setting');
 };
 const getStatus = (status: any) => {
     clamStatus.value = status;
     search();
 };
 
-const toFolder = (folder: string) => {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-};
-
 const toDoc = () => {
     window.open(globalStore.docsUrl + '/user_manual/toolbox/clam/', '_blank', 'noopener,noreferrer');
 };
diff --git a/frontend/src/views/toolbox/clam/record/index.vue b/frontend/src/views/toolbox/clam/record/index.vue
index 0b9450b83..4d17854d8 100644
--- a/frontend/src/views/toolbox/clam/record/index.vue
+++ b/frontend/src/views/toolbox/clam/record/index.vue
@@ -166,8 +166,7 @@ import { shortcuts } from '@/utils/shortcuts';
 import { Toolbox } from '@/api/interface/toolbox';
 import HighlightLog from '@/components/log/hightlight-log/index.vue';
 import { cleanClamRecord, getClamRecordLog, handleClamScan, searchClamRecord } from '@/api/modules/toolbox';
-import { useRouter } from 'vue-router';
-const router = useRouter();
+import { routerToFileWithPath } from '@/utils/router';
 
 const loading = ref();
 const refresh = ref(false);
@@ -241,7 +240,7 @@ const onHandle = async (row: Toolbox.ClamInfo) => {
 };
 const toFolder = async (path: string) => {
     let folder = dialogData.value.rowData!.infectedDir + '/1panel-infected/' + path;
-    router.push({ path: '/hosts/files', query: { path: folder } });
+    routerToFileWithPath(folder);
 };
 
 const search = async () => {
diff --git a/frontend/src/views/toolbox/ftp/index.vue b/frontend/src/views/toolbox/ftp/index.vue
index 67a812c36..aaffb198b 100644
--- a/frontend/src/views/toolbox/ftp/index.vue
+++ b/frontend/src/views/toolbox/ftp/index.vue
@@ -36,7 +36,7 @@
                 </template>
                 <template #leftToolBar>
                     <el-button type="primary" @click="onOpenDialog('add')">
-                        {{ $t('commons.button.add') }} {{ $t('toolbox.ftp.ftp') }}
+                        {{ $t('commons.button.add') }}
                     </el-button>
                     <el-button @click="onSync()">
                         {{ $t('commons.button.sync') }}
@@ -112,7 +112,9 @@
                         </el-table-column>
                         <el-table-column :label="$t('file.root')" :min-width="120" prop="path" show-overflow-tooltip>
                             <template #default="{ row }">
-                                <el-button text type="primary" @click="toFolder(row.path)">{{ row.path }}</el-button>
+                                <el-button text type="primary" @click="routerToFileWithPath(row.path)">
+                                    {{ row.path }}
+                                </el-button>
                             </template>
                         </el-table-column>
                         <el-table-column
@@ -155,8 +157,8 @@ import { deleteFtp, searchFtp, updateFtp, syncFtp, operateFtp, getFtpBase } from
 import OperateDialog from '@/views/toolbox/ftp/operate/index.vue';
 import LogDialog from '@/views/toolbox/ftp/log/index.vue';
 import { Toolbox } from '@/api/interface/toolbox';
-import router from '@/routers';
 import { GlobalStore } from '@/store';
+import { routerToFileWithPath } from '@/utils/router';
 
 const globalStore = GlobalStore();
 
@@ -212,10 +214,6 @@ const search = async (column?: any) => {
         });
 };
 
-const toFolder = (folder: string) => {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-};
-
 const onOperate = async (operation: string) => {
     let msg = operation === 'enable' || operation === 'disable' ? 'ssh.' : 'commons.button.';
     ElMessageBox.confirm(i18n.global.t('toolbox.ftp.operation', [i18n.global.t(msg + operation)]), 'FTP', {
diff --git a/frontend/src/views/toolbox/supervisor/index.vue b/frontend/src/views/toolbox/supervisor/index.vue
index 2aa370bf6..625ec7b39 100644
--- a/frontend/src/views/toolbox/supervisor/index.vue
+++ b/frontend/src/views/toolbox/supervisor/index.vue
@@ -51,7 +51,7 @@
                         show-overflow-tooltip
                     >
                         <template #default="{ row }">
-                            <el-button text type="primary" @click="toFolder(row.dir)">
+                            <el-button text type="primary" @click="routerToFileWithPath(row.dir)">
                                 {{ row.dir }}
                             </el-button>
                         </template>
@@ -160,7 +160,7 @@ import { GlobalStore } from '@/store';
 import i18n from '@/lang';
 import { HostTool } from '@/api/interface/host-tool';
 import { MsgSuccess } from '@/utils/message';
-import router from '@/routers';
+import { routerToFileWithPath } from '@/utils/router';
 const globalStore = GlobalStore();
 
 const loading = ref(false);
@@ -186,10 +186,6 @@ const getStatus = (status: any) => {
     search();
 };
 
-const toFolder = (folder: string) => {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-};
-
 const showStopped = computed((): boolean => {
     if (supervisorStatus.value.init || setSuperVisor.value) {
         return false;
diff --git a/frontend/src/views/toolbox/supervisor/status/index.vue b/frontend/src/views/toolbox/supervisor/status/index.vue
index aeaa1ffa2..e0b2f8a43 100644
--- a/frontend/src/views/toolbox/supervisor/status/index.vue
+++ b/frontend/src/views/toolbox/supervisor/status/index.vue
@@ -83,8 +83,8 @@ import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { HostTool } from '@/api/interface/host-tool';
 import InitPage from './init/index.vue';
-import router from '@/routers';
 import { GlobalStore } from '@/store';
+import { routerToNameWithQuery } from '@/utils/router';
 
 const globalStore = GlobalStore();
 
@@ -111,7 +111,7 @@ const setting = () => {
 };
 
 const toLibrary = () => {
-    router.push({ name: 'Library', query: { uncached: 'true' } });
+    routerToNameWithQuery('Library', { uncached: 'true' });
 };
 
 const toDoc = () => {
diff --git a/frontend/src/views/website/runtime/dotnet/index.vue b/frontend/src/views/website/runtime/dotnet/index.vue
index e3573be71..4461d6d2a 100644
--- a/frontend/src/views/website/runtime/dotnet/index.vue
+++ b/frontend/src/views/website/runtime/dotnet/index.vue
@@ -29,7 +29,7 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.runDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="toFolder(row.codeDir)">
+                            <el-button type="primary" link @click="routerToFileWithPath(row.codeDir)">
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -104,7 +104,6 @@ import OperateDonet from '@/views/website/runtime/dotnet/operate/index.vue';
 import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
 import RouterMenu from '../index.vue';
-import router from '@/routers/router';
 import ComposeLogs from '@/components/log/compose/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
@@ -115,6 +114,7 @@ import Terminal from '@/views/website/runtime/components/terminal.vue';
 import DockerStatus from '@/views/container/docker-status/index.vue';
 import { disabledButton } from '@/utils/runtime';
 import { operateRuntime, updateRuntimeRemark } from '../common/utils';
+import { routerToFileWithPath } from '@/utils/router';
 
 const loading = ref(false);
 const items = ref<Runtime.RuntimeDTO[]>([]);
@@ -252,10 +252,6 @@ const goDashboard = async (port: any, protocol: string) => {
     dialogPortJumpRef.value.acceptParams({ port: port, protocol: protocol });
 };
 
-const toFolder = (folder: string) => {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-};
-
 onMounted(() => {
     sync();
     search();
diff --git a/frontend/src/views/website/runtime/go/index.vue b/frontend/src/views/website/runtime/go/index.vue
index 725accba4..ad4e836ad 100644
--- a/frontend/src/views/website/runtime/go/index.vue
+++ b/frontend/src/views/website/runtime/go/index.vue
@@ -29,7 +29,7 @@
                     </el-table-column>
                     <el-table-column :label="$t('runtime.codeDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="toFolder(row.codeDir)">
+                            <el-button type="primary" link @click="routerToFileWithPath(row.codeDir)">
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -104,7 +104,6 @@ import Operate from '@/views/website/runtime/go/operate/index.vue';
 import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
 import RouterMenu from '../index.vue';
-import router from '@/routers/router';
 import ComposeLogs from '@/components/log/compose/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
@@ -115,6 +114,7 @@ import DockerStatus from '@/views/container/docker-status/index.vue';
 import { disabledButton } from '@/utils/runtime';
 import { GlobalStore } from '@/store';
 import { operateRuntime, updateRuntimeRemark } from '../common/utils';
+import { routerToFileWithPath } from '@/utils/router';
 const globalStore = GlobalStore();
 const mobile = computed(() => {
     return globalStore.isMobile();
@@ -251,10 +251,6 @@ const openTerminal = (row: Runtime.Runtime) => {
     terminalRef.value.acceptParams({ containerID: container, container: container });
 };
 
-const toFolder = (folder: string) => {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-};
-
 onMounted(() => {
     sync();
     search();
diff --git a/frontend/src/views/website/runtime/java/index.vue b/frontend/src/views/website/runtime/java/index.vue
index 8be424bee..e17201684 100644
--- a/frontend/src/views/website/runtime/java/index.vue
+++ b/frontend/src/views/website/runtime/java/index.vue
@@ -29,7 +29,7 @@
                     </el-table-column>
                     <el-table-column :label="$t('runtime.codeDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="toFolder(row.codeDir)">
+                            <el-button type="primary" link @click="routerToFileWithPath(row.codeDir)">
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -104,7 +104,6 @@ import OperateJava from '@/views/website/runtime/java/operate/index.vue';
 import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
 import RouterMenu from '../index.vue';
-import router from '@/routers/router';
 import ComposeLogs from '@/components/log/compose/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
@@ -115,6 +114,7 @@ import DockerStatus from '@/views/container/docker-status/index.vue';
 import { disabledButton } from '@/utils/runtime';
 import { GlobalStore } from '@/store';
 import { operateRuntime, updateRuntimeRemark } from '../common/utils';
+import { routerToFileWithPath } from '@/utils/router';
 const globalStore = GlobalStore();
 const mobile = computed(() => {
     return globalStore.isMobile();
@@ -251,10 +251,6 @@ const goDashboard = async (port: any, protocol: string) => {
     dialogPortJumpRef.value.acceptParams({ port: port, protocol: protocol });
 };
 
-const toFolder = (folder: string) => {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-};
-
 onMounted(() => {
     sync();
     search();
diff --git a/frontend/src/views/website/runtime/node/index.vue b/frontend/src/views/website/runtime/node/index.vue
index c68f715fc..345625b88 100644
--- a/frontend/src/views/website/runtime/node/index.vue
+++ b/frontend/src/views/website/runtime/node/index.vue
@@ -29,7 +29,7 @@
                     </el-table-column>
                     <el-table-column :label="$t('runtime.codeDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="toFolder(row.codeDir)">
+                            <el-button type="primary" link @click="routerToFileWithPath(row.codeDir)">
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -106,7 +106,6 @@ import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
 import RouterMenu from '../index.vue';
 import Modules from '@/views/website/runtime/node/module/index.vue';
-import router from '@/routers/router';
 import ComposeLogs from '@/components/log/compose/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
@@ -117,6 +116,7 @@ import DockerStatus from '@/views/container/docker-status/index.vue';
 import { disabledButton } from '@/utils/runtime';
 import { GlobalStore } from '@/store';
 import { operateRuntime, updateRuntimeRemark } from '../common/utils';
+import { routerToFileWithPath } from '@/utils/router';
 const globalStore = GlobalStore();
 const mobile = computed(() => {
     return globalStore.isMobile();
@@ -267,10 +267,6 @@ const openTerminal = (row: Runtime.Runtime) => {
     terminalRef.value.acceptParams({ containerID: container, container: container });
 };
 
-const toFolder = (folder: string) => {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-};
-
 onMounted(() => {
     sync();
     search();
diff --git a/frontend/src/views/website/runtime/php/check/index.vue b/frontend/src/views/website/runtime/php/check/index.vue
index 9541d5b49..88076e026 100644
--- a/frontend/src/views/website/runtime/php/check/index.vue
+++ b/frontend/src/views/website/runtime/php/check/index.vue
@@ -52,9 +52,8 @@ import { App } from '@/api/interface/app';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
 import { DeleteRuntime } from '@/api/modules/runtime';
-const router = useRouter();
+import { routerToName } from '@/utils/router';
 
 interface CheckRrops {
     items: App.AppInstallResource[];
@@ -92,7 +91,7 @@ const acceptParams = (props: CheckRrops) => {
 
 const toPage = (key: string) => {
     if (key === 'website') {
-        router.push({ name: 'Website' });
+        routerToName('Website');
     }
 };
 
diff --git a/frontend/src/views/website/runtime/php/index.vue b/frontend/src/views/website/runtime/php/index.vue
index 555a21a52..2b1306f46 100644
--- a/frontend/src/views/website/runtime/php/index.vue
+++ b/frontend/src/views/website/runtime/php/index.vue
@@ -45,7 +45,7 @@
                     </el-table-column>
                     <el-table-column :label="$t('home.dir')" prop="codeDir" width="80px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="toFolder(row.path)">
+                            <el-button type="primary" link @click="routerToFileWithPath(row.path)">
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -151,9 +151,9 @@ import RuntimeStatus from '@/views/website/runtime/components/runtime-status.vue
 import Terminal from '@/views/website/runtime/components/terminal.vue';
 import { disabledButton } from '@/utils/runtime';
 import { GlobalStore } from '@/store';
-import router from '@/routers/router';
 import DockerStatus from '@/views/container/docker-status/index.vue';
 import { operateRuntime, updateRuntimeRemark } from '../common/utils';
+import { routerToFileWithPath } from '@/utils/router';
 const globalStore = GlobalStore();
 const mobile = computed(() => {
     return globalStore.isMobile();
@@ -374,10 +374,6 @@ const openTaskLog = (taskID: string) => {
     taskLogRef.value.openWithTaskID(taskID);
 };
 
-const toFolder = (folder: string) => {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-};
-
 onMounted(() => {
     search();
 });
diff --git a/frontend/src/views/website/runtime/python/index.vue b/frontend/src/views/website/runtime/python/index.vue
index 56bb6df78..ee72adfc9 100644
--- a/frontend/src/views/website/runtime/python/index.vue
+++ b/frontend/src/views/website/runtime/python/index.vue
@@ -29,7 +29,7 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.runDir')" prop="codeDir" min-width="120px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="toFolder(row.codeDir)">
+                            <el-button type="primary" link @click="routerToFileWithPath(row.codeDir)">
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -104,7 +104,6 @@ import Operate from '@/views/website/runtime/python/operate/index.vue';
 import Delete from '@/views/website/runtime/delete/index.vue';
 import i18n from '@/lang';
 import RouterMenu from '../index.vue';
-import router from '@/routers/router';
 import ComposeLogs from '@/components/log/compose/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import AppResources from '@/views/website/runtime/php/check/index.vue';
@@ -115,6 +114,7 @@ import DockerStatus from '@/views/container/docker-status/index.vue';
 import { disabledButton } from '@/utils/runtime';
 import { GlobalStore } from '@/store';
 import { operateRuntime, updateRuntimeRemark } from '../common/utils';
+import { routerToFileWithPath } from '@/utils/router';
 const globalStore = GlobalStore();
 const mobile = computed(() => {
     return globalStore.isMobile();
@@ -251,10 +251,6 @@ const openTerminal = (row: Runtime.Runtime) => {
     terminalRef.value.acceptParams({ containerID: container, container: container });
 };
 
-const toFolder = (folder: string) => {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-};
-
 onMounted(() => {
     sync();
     search();
diff --git a/frontend/src/views/website/website/check/index.vue b/frontend/src/views/website/website/check/index.vue
index 095d92ded..f097cdcad 100644
--- a/frontend/src/views/website/website/check/index.vue
+++ b/frontend/src/views/website/website/check/index.vue
@@ -24,9 +24,8 @@
 </template>
 <script lang="ts" setup>
 import { Website } from '@/api/interface/website';
+import { routerToName } from '@/utils/router';
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-const router = useRouter();
 
 interface InstallRrops {
     items: Website.CheckRes[];
@@ -45,7 +44,7 @@ const handleClose = () => {
 };
 
 const toPage = () => {
-    router.push({ name: 'AppInstalled' });
+    routerToName('AppInstalled');
 };
 
 defineExpose({
diff --git a/frontend/src/views/website/website/config/basic/site-folder/index.vue b/frontend/src/views/website/website/config/basic/site-folder/index.vue
index 73cb54bd1..4159b8d0e 100644
--- a/frontend/src/views/website/website/config/basic/site-folder/index.vue
+++ b/frontend/src/views/website/website/config/basic/site-folder/index.vue
@@ -8,7 +8,7 @@
                 <el-form-item :label="$t('website.primaryPath')">
                     <el-space wrap>
                         {{ website.sitePath + '/index' }}
-                        <el-button type="primary" link @click="toFolder(website.sitePath + '/index')">
+                        <el-button type="primary" link @click="routerToFileWithPath(website.sitePath + '/index')">
                             <el-icon>
                                 <FolderOpened />
                             </el-icon>
@@ -67,10 +67,9 @@ import { Website } from '@/api/interface/website';
 import { getDirConfig, getWebsite, updateWebsiteDir, updateWebsiteDirPermission } from '@/api/modules/website';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+import { routerToFileWithPath } from '@/utils/router';
 import { FormInstance } from 'element-plus';
 import { computed, onMounted, reactive, ref } from 'vue';
-import { useRouter } from 'vue-router';
-const router = useRouter();
 
 const props = defineProps({
     id: {
@@ -169,10 +168,6 @@ const getConfig = async () => {
     } catch (error) {}
 };
 
-const toFolder = (folder: string) => {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-};
-
 onMounted(() => {
     initData();
     search();
diff --git a/frontend/src/views/website/website/config/index.vue b/frontend/src/views/website/website/config/index.vue
index 6503b65e5..6e9e8ba1d 100644
--- a/frontend/src/views/website/website/config/index.vue
+++ b/frontend/src/views/website/website/config/index.vue
@@ -44,10 +44,10 @@ import { onMounted, ref, watch } from 'vue';
 import Basic from './basic/index.vue';
 import Resource from './resource/index.vue';
 import Log from './log/index.vue';
-import router from '@/routers';
 import WebsiteStatus from '@/views/website/website/status/index.vue';
 import { getWebsite } from '@/api/modules/website';
 import { GetRuntime } from '@/api/modules/runtime';
+import { routerToNameWithParams } from '@/utils/router';
 
 const props = defineProps({
     id: {
@@ -73,7 +73,7 @@ watch(index, (curr, old) => {
 });
 
 const changeTab = (index: string) => {
-    router.push({ name: 'WebsiteConfig', params: { id: id.value, tab: index } });
+    routerToNameWithParams('WebsiteConfig', { id: id.value, tab: index });
 };
 
 onMounted(() => {
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index dd845dc19..73b78445f 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -177,7 +177,7 @@
                     </el-table-column>
                     <el-table-column :label="$t('website.sitePath')" prop="sitePath" width="90px">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="toFolder(row.sitePath + '/index')">
+                            <el-button type="primary" link @click="routerToFileWithPath(row.sitePath + '/index')">
                                 <el-icon>
                                     <FolderOpened />
                                 </el-icon>
@@ -303,7 +303,6 @@ import NginxConfig from '@/views/website/website/nginx/index.vue';
 import GroupDialog from '@/components/agent-group/index.vue';
 import AppStatus from '@/components/app-status/index.vue';
 import i18n from '@/lang';
-import router from '@/routers';
 import { onMounted, reactive, ref, computed } from 'vue';
 import { listDomains, opWebsite, searchWebsites, updateWebsite } from '@/api/modules/website';
 import { Website } from '@/api/interface/website';
@@ -316,6 +315,7 @@ import { getAgentGroupList } from '@/api/modules/group';
 import { Group } from '@/api/interface/group';
 import { GlobalStore } from '@/store';
 import { getWebsiteTypes } from '@/global/mimetype';
+import { routerToFileWithPath, routerToNameWithParams, routerToNameWithQuery } from '@/utils/router';
 const globalStore = GlobalStore();
 
 const shortcuts = [
@@ -376,7 +376,7 @@ const mobile = computed(() => {
 });
 
 const goRouter = async (key: string) => {
-    router.push({ name: 'AppAll', query: { install: key } });
+    routerToNameWithQuery('AppAll', { install: key });
 };
 
 const showFavorite = (row: any) => {
@@ -439,7 +439,7 @@ const setting = () => {
 };
 
 const openConfig = (id: number) => {
-    router.push({ name: 'WebsiteConfig', params: { id: id, tab: 'basic' } });
+    routerToNameWithParams('WebsiteConfig', { id: id, tab: 'basic' });
 };
 
 const isEver = (time: string) => {
@@ -603,10 +603,6 @@ const operateWebsite = (op: string, id: number) => {
     });
 };
 
-const toFolder = (folder: string) => {
-    router.push({ path: '/hosts/files', query: { path: folder } });
-};
-
 const searchDomains = (id: number) => {
     listDomains(id).then((res) => {
         domains.value = res.data;