diff --git a/src/views/common/TabBar.vue b/src/views/common/TabBar.vue
index ca9e55f75f9caea0ccde5a40ec3c70bc9610d234..0a450f1498168f6b9e74dbdcae65ff3e54785777 100644
--- a/src/views/common/TabBar.vue
+++ b/src/views/common/TabBar.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="tabBar tabBar-wrap">
-    <span>
+    <span :class="{'cur': currIndex === 0}">
       <router-link to="/bhfb">病患分布</router-link>
     </span>
-    <span>
+    <span :class="{'cur': currIndex === 1}">
       <router-link to="/yjdwfb">应急队伍分布</router-link>
     </span>
-    <span>
+    <span :class="{'cur': currIndex === 2}">
       <router-link to="/Wzxqyfb">物资需求与分布</router-link>
     </span>
     <!-- <span>
@@ -18,12 +18,30 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 
 @Component({
   name: 'TabBar'
 })
-export default class TabBar extends Vue {}
+export default class TabBar extends Vue {
+  private currIndex: any = 0;
+  private mounted() {
+    this.onRouteChanged(this.$route);
+  }
+  @Watch('$route')
+  onRouteChanged(n: any) {
+    if(n.path.indexOf('bhfb') > -1 || n.path === '/') {
+      this.currIndex = 0;
+    }
+    if(n.path.indexOf('yjdwfb') > -1) {
+      this.currIndex = 1;
+    }
+    if(n.path.indexOf('Wzxqyfb') > -1) {
+      this.currIndex = 2;
+    }
+    console.log(this.currIndex);
+  }
+}
 </script>
 <style lang="less" scoped>
 @imgUrl: '../../assets/img/layout';
@@ -61,4 +79,4 @@ export default class TabBar extends Vue {}
     }
   }
 }
-</style>
\ No newline at end of file
+</style>