change url when switching tab in user/app settings page

src/router/desktop.js

@@ -114,7 +114,7 @@ const router = createRouter({
                     component: UserSettingsPage,
                     beforeEnter: checkLogin,
                     props: route => ({
-                        tab: route.query.tab
+                        initTab: route.query.tab
                     })
                 },
                 {
@@ -122,7 +122,7 @@ const router = createRouter({
                     component: AppSettingsPage,
                     beforeEnter: checkLogin,
                     props: route => ({
-                        tab: route.query.tab
+                        initTab: route.query.tab
                     })
                 },
                 {

src/views/desktop/app/AppSettingsPage.vue

@@ -1,15 +1,15 @@
 <template>
     <div>
         <v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab">
-            <v-tab value="basicSetting">
+            <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
                 <v-icon size="20" start :icon="icons.basicSetting"/>
                 {{ $t('Basic') }}
             </v-tab>
-            <v-tab value="applicationLockSetting">
+            <v-tab value="applicationLockSetting" @click="pushRouter('applicationLockSetting')">
                 <v-icon size="20" start :icon="icons.applicationLockSetting"/>
                 {{ $t('Application Lock') }}
             </v-tab>
-            <v-tab value="statisticsSetting">
+            <v-tab value="statisticsSetting" @click="pushRouter('statisticsSetting')">
                 <v-icon size="20" start :icon="icons.statisticsSetting"/>
                 {{ $t('Statistics') }}
             </v-tab>
@@ -49,10 +49,10 @@ export default {
         AppStatisticsSettingTab
     },
     props: [
-        'tab'
+        'initTab'
     ],
     data() {
-        let queryActiveTab = this.tab || 'basicSetting';
+        let queryActiveTab = this.initTab || 'basicSetting';
 
         if ([
             'basicSetting',
@@ -70,6 +70,22 @@ export default {
                 statisticsSetting: mdiChartPieOutline
             }
         };
+    },
+    beforeRouteUpdate(to) {
+        if (to.query && to.query.tab && [
+            'basicSetting',
+            'applicationLockSetting',
+            'statisticsSetting'
+        ].indexOf(to.query.tab) >= 0) {
+            this.activeTab = to.query.tab;
+        } else {
+            this.activeTab = 'basicSetting';
+        }
+    },
+    methods: {
+        pushRouter(tab) {
+            this.$router.push(`/app/settings?tab=${tab}`);
+        }
     }
 }
 </script>

src/views/desktop/user/UserSettingsPage.vue

@@ -1,19 +1,19 @@
 <template>
     <div>
         <v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab">
-            <v-tab value="basicSetting">
+            <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
                 <v-icon size="20" start :icon="icons.basicSetting"/>
                 {{ $t('Basic') }}
             </v-tab>
-            <v-tab value="securitySetting">
+            <v-tab value="securitySetting" @click="pushRouter('securitySetting')">
                 <v-icon size="20" start :icon="icons.securitySetting"/>
                 {{ $t('Security') }}
             </v-tab>
-            <v-tab value="twoFactorSetting">
+            <v-tab value="twoFactorSetting" @click="pushRouter('twoFactorSetting')">
                 <v-icon size="20" start :icon="icons.twoFactorSetting"/>
                 {{ $t('Two-Factor Authentication') }}
             </v-tab>
-            <v-tab value="dataManagementSetting">
+            <v-tab value="dataManagementSetting" @click="pushRouter('dataManagementSetting')">
                 <v-icon size="20" start :icon="icons.dataManagementSetting"/>
                 {{ $t('Data Management') }}
             </v-tab>
@@ -60,10 +60,10 @@ export default {
         UserDataManagementSettingTab
     },
     props: [
-        'tab'
+        'initTab'
     ],
     data() {
-        let queryActiveTab = this.tab || 'basicSetting';
+        let queryActiveTab = this.initTab || 'basicSetting';
 
         if ([
             'basicSetting',
@@ -90,6 +90,23 @@ export default {
                 this.$refs.twoFactorSettingTab.reset();
             }
         }
+    },
+    beforeRouteUpdate(to) {
+        if (to.query && to.query.tab && [
+            'basicSetting',
+            'securitySetting',
+            'twoFactorSetting',
+            'dataManagementSetting'
+        ].indexOf(to.query.tab) >= 0) {
+            this.activeTab = to.query.tab;
+        } else {
+            this.activeTab = 'basicSetting';
+        }
+    },
+    methods: {
+        pushRouter(tab) {
+            this.$router.push(`/user/settings?tab=${tab}`);
+        }
     }
 }
 </script>