前端 H5 ：底部工具栏的高亮

mobile-web/src/components/footer/navigate.vue

@@ -1,6 +1,6 @@
 <template>
     <div style="height:50px;">
-    <van-tabbar >
+    <van-tabbar v-model="active">
         <van-tabbar-item icon="wap-home" to="/home">首页</van-tabbar-item>
         <van-tabbar-item icon="wap-nav" to="/category" >分类</van-tabbar-item>
         <van-tabbar-item icon="cart" to="/cart" >购物车</van-tabbar-item>
@@ -16,6 +16,29 @@ export default {
     components:{
         [Tabbar.name]: Tabbar,
         [TabbarItem.name]: TabbarItem,
+    },
+    data() {
+        return {
+          active: 0,
+        };
+    },
+    created() {
+      // TODO 芋艿，可能不太优雅
+      let path = this.$route.path;
+      switch (path) {
+        case '/home':
+          this.active = 0;
+          break;
+        case '/category':
+          this.active = 1;
+          break;
+        case '/cart':
+          this.active = 2;
+          break;
+        case '/user/index':
+          this.active = 3;
+          break;
+      }
     }
 }
 </script>