Vue에서 WeChat과 같은 탐색 모음을 구현하는 방법은 무엇입니까?

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
  {
    path: '/',
    name: 'Index',
    component: () => import('@/components/Index.vue')
  },
  {
    path: '/chat',
    name: 'Chat',
    component: () => import('@/components/Chat.vue')
  },
  {
    path: '/contacts',
    name: 'Contacts',
    component: () => import('@/components/Contacts.vue')
  },
  {
    path: '/discover',
    name: 'Discover',
    component: () => import('@/components/Discover.vue')
  },
  {
    path: '/me',
    name: 'Me',
    component: () => import('@/components/Me.vue')
  }
]
const router = new VueRouter({
  routes
});
export default router;

<template>
  <div class="nav">
    <div class="nav-item" :class="{active: activeIndex === 0}" @click="$router.push('/')"><i class="iconfont icon-weixin"></i>微信</div>
    <div class="nav-item" :class="{active: activeIndex === 1}" @click="$router.push('/contacts')"><i class="iconfont icon-tongxunlu"></i>通讯录</div>
    <div class="nav-item" :class="{active: activeIndex === 2}" @click="$router.push('/discover')"><i class="iconfont icon-faxian"></i>发现</div>
    <div class="nav-item" :class="{active: activeIndex === 3}" @click="$router.push('/me')"><i class="iconfont icon-wo"></i>我</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: 0
    };
  },
  created () {
    this.getActiveIndex();
  },
  methods: {
    getActiveIndex () {
      const path = this.$route.path;
      switch (path) {
        case '/':
          this.activeIndex = 0;
          break;
        case '/contacts':
          this.activeIndex = 1;
          break;
        case '/discover':
          this.activeIndex = 2;
          break;
        case '/me':
          this.activeIndex = 3;
          break;
        default:
          this.activeIndex = 0;
          break;
      }
    }
  },
  watch: {
    $route () {
      this.getActiveIndex();
    }
  }
};
</script>

<style>
.nav {
  width: 100%;
  height: 50px;
  line-height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
}
.nav-item {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #9b9b9b;
}
.nav-item.active {
  color: #4caf50;
}
</style>

// App.vue
<template>
  <div>
    <Nav></Nav>
    <router-view></router-view>
  </div>
</template>

<script>
import Nav from '@/components/Nav.vue';
export default {
  components: {
    Nav
  }
}
</script>