思路

1. 在components文件夹下建立Navbar文件夹，并在Navbar下建立index.vue和NavbarItem.vue文件
2. 向Navbar组件props中传入待渲染的导航栏list数组，包含属性path、icon、activeIcon、navbarText、activeColor，Navbar组件引入NavbarItem组件利用v-for进行导航栏子项的遍历
3. 向NavbarItem组件props传入属性path、icon、activeIcon、navbarText、activeColor，通过计算属性判断当前是否处于该页面，导航是否高亮，return this.$route.path.indexOf(this.path)!==-1
4. 在Layouts文件夹下的index.vue的<router-view>路由占位符下面引入组件<Navbar/>

代码

Navbar 下的 index.vue

<template>
  <footer class="footer">
    <div class="navbar">
      <NavbarItem
        v-for="item in list"
        :key="item.path"
        :path="item.path"
        :icon="item.icon"
        :activeIcon="item.activeIcon"
        :navbarText="item.navbarText"
        :activeColor="activeColor"
      />
    </div>
  </footer>
</template>

<script>
import NavbarItem from "./NavbarItem.vue";
export default {
  name: "Navbar",
  components: { NavbarItem },
  props: {
    list: {
      required: true,
      type: Array,
    },
    activeColor: {
      required: true,
      type: String,
    },
  },
  mounted() {
    console.log(this.list);
  },
};
</script>

<style lang="stylus" scoped>
.footer
  .navbar
    width 100%;
    position fixed;
    bottom 0;
    display flex;
    flex-direction row;
    height 70px;
    background white;
    justify-content space-around;
    z-index 9999;
</style>

Navbar 下的 NavbarItem.vue

<template>
  <router-link class="nav-bar-item" :to="path">
    <img :src="isActive ? activeIcon : icon" />
    <p
      :style="{ color: isActive ? activeColor : 'black' }"
      class="nav-bar-text"
    >
      {{ navbarText }}
    </p>
  </router-link>
</template>

<script>
export default {
  name: "NavbarItem",
  props: {
    path: {
      required: true,
      type: String,
    },
    icon: {
      required: true,
      type: String,
    },
    activeIcon: {
      required: true,
      type: String,
    },
    navbarText: {
      required: true,
      type: String,
    },
    activeColor: {
      required: true,
      type: String,
    },
  },
  computed: {
    isActive() {
      return this.$route.path.indexOf(this.path) !== -1;
    },
  },
};
</script>

<style lang="stylus" scoped>
.nav-bar-item
  height 100%;
  display flex;
  flex-direction column;
  justify-content center;
  align-items center;
  img
    width 25px;
    height 25px;
  .nav-bar-text
    padding-top 2px;
    font-size $--font-size-small;
</style>