diff --git a/frontend/src/views/app-store/index.vue b/frontend/src/views/app-store/index.vue
index 2bb88f1fd..02479f167 100644
--- a/frontend/src/views/app-store/index.vue
+++ b/frontend/src/views/app-store/index.vue
@@ -1,11 +1,11 @@
 <template>
     <div>
         <el-card class="topCard">
-            <el-radio-group v-model="activeName">
-                <el-radio-button class="topButton" size="large" @click="routerTo('/apps/all')" label="all">
+            <el-radio-group v-model="activeName" @change="handleChange">
+                <el-radio-button class="topButton" size="large" label="all">
                     {{ $t('app.all') }}
                 </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/apps/installed')" label="installed">
+                <el-radio-button class="topButton" size="large" label="installed">
                     {{ $t('app.installed') }}
                 </el-radio-button>
             </el-radio-group>
@@ -29,6 +29,17 @@ const routerTo = (path: string) => {
     router.push({ path: path });
 };
 
+const handleChange = (val: string) => {
+    switch (val) {
+        case 'all':
+            routerTo('/apps/all');
+            break;
+        case 'installed':
+            routerTo('/apps/installed');
+            break;
+    }
+};
+
 onMounted(() => {
     const path = router.currentRoute.value.path;
     if (path === '/apps/all') {
diff --git a/frontend/src/views/container/index.vue b/frontend/src/views/container/index.vue
index cc4b39dd4..2457c71db 100644
--- a/frontend/src/views/container/index.vue
+++ b/frontend/src/views/container/index.vue
@@ -1,49 +1,29 @@
 <template>
     <div>
         <el-card class="topCard">
-            <el-radio-group v-model="active">
-                <el-radio-button class="topButton" size="large" @click="routerTo('/containers')" label="container">
+            <el-radio-group :model-value="props.activeName" @change="handleChange">
+                <el-radio-button class="topButton" size="large" label="container">
                     {{ $t('container.container') }}
                 </el-radio-button>
-                <el-radio-button
-                    class="topButton"
-                    size="large"
-                    @click="routerTo('/containers/compose')"
-                    label="compose"
-                >
+                <el-radio-button class="topButton" size="large" label="compose">
                     {{ $t('container.compose') }}
                 </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/containers/image')" label="image">
+                <el-radio-button class="topButton" size="large" label="image">
                     {{ $t('container.image') }}
                 </el-radio-button>
-                <el-radio-button
-                    class="topButton"
-                    size="large"
-                    @click="routerTo('/containers/network')"
-                    label="network"
-                >
+                <el-radio-button class="topButton" size="large" label="network">
                     {{ $t('container.network') }}
                 </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/containers/volume')" label="volume">
+                <el-radio-button class="topButton" size="large" label="volume">
                     {{ $t('container.volume') }}
                 </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/containers/repo')" label="repo">
+                <el-radio-button class="topButton" size="large" label="repo">
                     {{ $t('container.repo') }}
                 </el-radio-button>
-                <el-radio-button
-                    class="topButton"
-                    size="large"
-                    @click="routerTo('/containers/template')"
-                    label="template"
-                >
+                <el-radio-button class="topButton" size="large" label="template">
                     {{ $t('container.composeTemplate') }}
                 </el-radio-button>
-                <el-radio-button
-                    class="topButton"
-                    size="large"
-                    @click="routerTo('/containers/setting')"
-                    label="setting"
-                >
+                <el-radio-button class="topButton" size="large" label="setting">
                     {{ $t('container.setting') }}
                 </el-radio-button>
             </el-radio-group>
@@ -52,9 +32,9 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter();
+
 interface MenuProps {
     activeName: string;
 }
@@ -62,17 +42,38 @@ const props = withDefaults(defineProps<MenuProps>(), {
     activeName: 'container',
 });
 
-const active = ref('container');
-
-onMounted(() => {
-    if (props.activeName) {
-        active.value = props.activeName;
-    }
-});
-
 const routerTo = (path: string) => {
     router.push({ path: path });
 };
+
+const handleChange = (val: string) => {
+    switch (val) {
+        case 'container':
+            routerTo('/containers');
+            break;
+        case 'compose':
+            routerTo('/containers/compose');
+            break;
+        case 'image':
+            routerTo('/containers/image');
+            break;
+        case 'network':
+            routerTo('/containers/network');
+            break;
+        case 'volume':
+            routerTo('/containers/volume');
+            break;
+        case 'repo':
+            routerTo('/containers/repo');
+            break;
+        case 'template':
+            routerTo('/containers/template');
+            break;
+        case 'setting':
+            routerTo('/containers/setting');
+            break;
+    }
+};
 </script>
 
 <style>
diff --git a/frontend/src/views/database/index.vue b/frontend/src/views/database/index.vue
index 59b1a893c..e25f0da04 100644
--- a/frontend/src/views/database/index.vue
+++ b/frontend/src/views/database/index.vue
@@ -1,20 +1,15 @@
 <template>
     <div>
         <el-card class="topCard">
-            <el-radio-group v-model="active">
-                <el-radio-button class="topButton" size="large" @click="routerTo('/databases')" label="mysql">
-                    Mysql
-                </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/databases/redis')" label="redis">
-                    Redis
-                </el-radio-button>
+            <el-radio-group :model-value="props.activeName" @change="handleChange">
+                <el-radio-button class="topButton" size="large" label="mysql">Mysql</el-radio-button>
+                <el-radio-button class="topButton" size="large" label="redis">Redis</el-radio-button>
             </el-radio-group>
         </el-card>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter();
 interface MenuProps {
@@ -24,17 +19,20 @@ const props = withDefaults(defineProps<MenuProps>(), {
     activeName: 'mysql',
 });
 
-const active = ref('mysql');
-
-onMounted(() => {
-    if (props.activeName) {
-        active.value = props.activeName;
-    }
-});
-
 const routerTo = (path: string) => {
     router.push({ path: path });
 };
+
+const handleChange = (val: string) => {
+    switch (val) {
+        case 'mysql':
+            routerTo('/databases');
+            break;
+        case 'redis':
+            routerTo('/databases/redis');
+            break;
+    }
+};
 </script>
 
 <style>
diff --git a/frontend/src/views/log/index.vue b/frontend/src/views/log/index.vue
index 13f309d6f..200a3562a 100644
--- a/frontend/src/views/log/index.vue
+++ b/frontend/src/views/log/index.vue
@@ -1,14 +1,14 @@
 <template>
     <div>
         <el-card class="topCard">
-            <el-radio-group v-model="active">
-                <el-radio-button class="topButton" size="large" @click="routerTo('/logs')" label="operation">
+            <el-radio-group :model-value="props.activeName" @change="handleChange">
+                <el-radio-button class="topButton" size="large" label="operation">
                     {{ $t('logs.operation') }}
                 </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/logs/login')" label="login">
+                <el-radio-button class="topButton" size="large" label="login">
                     {{ $t('logs.login') }}
                 </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/logs/system')" label="system">
+                <el-radio-button class="topButton" size="large" label="system">
                     {{ $t('logs.system') }}
                 </el-radio-button>
             </el-radio-group>
@@ -17,9 +17,9 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 const router = useRouter();
+
 interface MenuProps {
     activeName: string;
 }
@@ -27,17 +27,23 @@ const props = withDefaults(defineProps<MenuProps>(), {
     activeName: 'operation',
 });
 
-const active = ref('operation');
-
-onMounted(() => {
-    if (props.activeName) {
-        active.value = props.activeName;
-    }
-});
-
 const routerTo = (path: string) => {
     router.push({ path: path });
 };
+
+const handleChange = (val: string) => {
+    switch (val) {
+        case 'operation':
+            routerTo('/logs');
+            break;
+        case 'login':
+            routerTo('/logs/login');
+            break;
+        case 'system':
+            routerTo('/logs/system');
+            break;
+    }
+};
 </script>
 
 <style>
diff --git a/frontend/src/views/setting/index.vue b/frontend/src/views/setting/index.vue
index 6210b329f..935849c59 100644
--- a/frontend/src/views/setting/index.vue
+++ b/frontend/src/views/setting/index.vue
@@ -1,25 +1,20 @@
 <template>
     <div>
         <el-card class="topCard">
-            <el-radio-group v-model="active">
-                <el-radio-button class="topButton" size="large" @click="routerTo('/setting')" label="panel">
+            <el-radio-group :model-value="props.activeName" @change="handleChange">
+                <el-radio-button class="topButton" size="large" label="panel">
                     {{ $t('setting.panel') }}
                 </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/setting/safe')" label="safe">
+                <el-radio-button class="topButton" size="large" label="safe">
                     {{ $t('setting.safe') }}
                 </el-radio-button>
-                <el-radio-button
-                    class="topButton"
-                    @click="routerTo('/setting/backupaccount')"
-                    size="large"
-                    label="backupaccount"
-                >
+                <el-radio-button class="topButton" size="large" label="backupaccount">
                     {{ $t('setting.backupAccount') }}
                 </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/setting/monitor')" label="monitor">
+                <el-radio-button class="topButton" size="large" label="monitor">
                     {{ $t('menu.monitor') }}
                 </el-radio-button>
-                <el-radio-button class="topButton" size="large" @click="routerTo('/setting/about')" label="about">
+                <el-radio-button class="topButton" size="large" label="about">
                     {{ $t('setting.about') }}
                 </el-radio-button>
             </el-radio-group>
@@ -28,7 +23,6 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
 import router from '@/routers';
 
 interface MenuProps {
@@ -38,16 +32,29 @@ const props = withDefaults(defineProps<MenuProps>(), {
     activeName: 'all',
 });
 
-const active = ref('all');
 const routerTo = (path: string) => {
     router.push({ path: path });
 };
 
-onMounted(() => {
-    if (props.activeName) {
-        active.value = props.activeName;
+const handleChange = (val: string) => {
+    switch (val) {
+        case 'panel':
+            routerTo('/setting');
+            break;
+        case 'safe':
+            routerTo('/setting/safe');
+            break;
+        case 'backupaccount':
+            routerTo('/setting/backupaccount');
+            break;
+        case 'monitor':
+            routerTo('/setting/monitor');
+            break;
+        case 'about':
+            routerTo('/setting/about');
+            break;
     }
-});
+};
 </script>
 
 <style>