diff --git a/ui/src/components/view/ResourceView.vue b/ui/src/components/view/ResourceView.vue
index 2147f0bc2cc..333f582ad0e 100644
--- a/ui/src/components/view/ResourceView.vue
+++ b/ui/src/components/view/ResourceView.vue
@@ -37,7 +37,7 @@
           v-else
           style="width: 100%"
           :animated="false"
-          :defaultActiveKey="tabs[0].name"
+          :activeKey="activeTab || tabs[0].name"
           @change="onTabChange" >
           <a-tab-pane
             v-for="tab in tabs"
@@ -106,11 +106,28 @@ export default {
           }
         })
       }
+    },
+    $route: function (newItem, oldItem) {
+      this.setActiveTab()
     }
   },
+  mounted () {
+    this.setActiveTab()
+  },
   methods: {
     onTabChange (key) {
       this.activeTab = key
+      const query = Object.assign({}, this.$route.query)
+      query.tab = key
+      history.replaceState(
+        {},
+        null,
+        '#' + this.$route.path + '?' + Object.keys(query).map(key => {
+          return (
+            encodeURIComponent(key) + '=' + encodeURIComponent(query[key])
+          )
+        }).join('&')
+      )
     },
     showTab (tab) {
       if ('networkServiceFilter' in tab) {
@@ -139,6 +156,9 @@ export default {
       } else {
         return true
       }
+    },
+    setActiveTab () {
+      this.activeTab = this.$route.query.tab ? this.$route.query.tab : this.tabs[0].name
     }
   }
 }
diff --git a/ui/src/views/compute/InstanceTab.vue b/ui/src/views/compute/InstanceTab.vue
index 95da48797f5..fd11d762c44 100644
--- a/ui/src/views/compute/InstanceTab.vue
+++ b/ui/src/views/compute/InstanceTab.vue
@@ -335,11 +335,31 @@ export default {
     resource: function (newItem, oldItem) {
       this.vm = newItem
       this.fetchData()
+    },
+    $route: function (newItem, oldItem) {
+      this.setCurrentTab()
     }
   },
+  mounted () {
+    this.setCurrentTab()
+  },
   methods: {
+    setCurrentTab () {
+      this.currentTab = this.$route.query.tab ? this.$route.query.tab : 'details'
+    },
     handleChangeTab (e) {
       this.currentTab = e
+      const query = Object.assign({}, this.$route.query)
+      query.tab = e
+      history.replaceState(
+        {},
+        null,
+        '#' + this.$route.path + '?' + Object.keys(query).map(key => {
+          return (
+            encodeURIComponent(key) + '=' + encodeURIComponent(query[key])
+          )
+        }).join('&')
+      )
     },
     fetchData () {
       this.volumes = []
diff --git a/ui/src/views/compute/KubernetesServiceTab.vue b/ui/src/views/compute/KubernetesServiceTab.vue
index 1524467af19..91c8973d4ff 100644
--- a/ui/src/views/compute/KubernetesServiceTab.vue
+++ b/ui/src/views/compute/KubernetesServiceTab.vue
@@ -204,9 +204,6 @@ export default {
       this.vmColumns = this.vmColumns.filter(x => x.dataIndex !== 'instancename')
     }
   },
-  mounted () {
-    this.handleFetchData()
-  },
   watch: {
     resource (newData, oldData) {
       if (newData && newData !== oldData) {
@@ -217,9 +214,33 @@ export default {
           this.vmColumns = this.vmColumns.filter(x => x.dataIndex !== 'port')
         }
       }
+    },
+    $route: function (newItem, oldItem) {
+      this.setCurrentTab()
     }
   },
+  mounted () {
+    this.handleFetchData()
+    this.setCurrentTab()
+  },
   methods: {
+    setCurrentTab () {
+      this.currentTab = this.$route.query.tab ? this.$route.query.tab : 'details'
+    },
+    handleChangeTab (e) {
+      this.currentTab = e
+      const query = Object.assign({}, this.$route.query)
+      query.tab = e
+      history.replaceState(
+        {},
+        null,
+        '#' + this.$route.path + '?' + Object.keys(query).map(key => {
+          return (
+            encodeURIComponent(key) + '=' + encodeURIComponent(query[key])
+          )
+        }).join('&')
+      )
+    },
     isAdmin () {
       return ['Admin'].includes(this.$store.getters.userInfo.roletype)
     },
@@ -235,9 +256,6 @@ export default {
     isObjectEmpty (obj) {
       return !(obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object)
     },
-    handleChangeTab (e) {
-      this.currentTab = e
-    },
     handleFetchData () {
       this.fetchKubernetesClusterConfig()
       this.fetchKubernetesVersion()
diff --git a/ui/src/views/network/VpcTab.vue b/ui/src/views/network/VpcTab.vue
index 4f8ec4eaf44..d75dae8dbc9 100644
--- a/ui/src/views/network/VpcTab.vue
+++ b/ui/src/views/network/VpcTab.vue
@@ -396,22 +396,40 @@ export default {
     this.vpnConnectionForm = this.$form.createForm(this)
     this.networkAclForm = this.$form.createForm(this)
   },
-  mounted () {
-    this.handleFetchData()
-  },
   watch: {
     loading (newData, oldData) {
       if (!newData && this.resource.id) {
         this.handleFetchData()
       }
+    },
+    $route: function (newItem, oldItem) {
+      this.setCurrentTab()
     }
   },
+  mounted () {
+    this.handleFetchData()
+    this.setCurrentTab()
+  },
   methods: {
+    setCurrentTab () {
+      this.currentTab = this.$route.query.tab ? this.$route.query.tab : 'details'
+    },
     handleChangeTab (e) {
       this.currentTab = e
       this.page = 1
       this.pageSize = 10
       this.handleFetchData()
+      const query = Object.assign({}, this.$route.query)
+      query.tab = e
+      history.replaceState(
+        {},
+        null,
+        '#' + this.$route.path + '?' + Object.keys(query).map(key => {
+          return (
+            encodeURIComponent(key) + '=' + encodeURIComponent(query[key])
+          )
+        }).join('&')
+      )
     },
     handleFetchData () {
       switch (this.currentTab) {