change url when switching tab in user/app settings page

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>