공통 구성 요소

<template>
    <div class="bottom-box">
        <div v-for="(item,index) in bottomArray" :key="index" @click="goUrl(item.url)">
            <img :src="active==index?item.selectImg:item.backgoundImg" alt="">
            {{item.title}}
        </div>
    </div>
</template>

<script>
export default {
  name: 'homeBottom',
  props:['active'],
  data(){
      return {
          bottomArray:[
              {title:' ',selectImg:require('../assets/bottom/hangqing-select.png'),backgoundImg:require('../assets/bottom/hangqing.png'),url:'/quotes'},
              {title:' ',selectImg:require('../assets/bottom/celve-select.png'),backgoundImg:require('../assets/bottom/celve.png'),url:'/strategy'},
              {title:' ',selectImg:require('../assets/bottom/zhitu-select.png'),backgoundImg:require('../assets/bottom/zhitu.png'),url:'/community'},
              {title:' ',selectImg:require('../assets/bottom/zsc-select.png'),backgoundImg:require('../assets/bottom/zsc.png'),url:'/provingGround'},
              {title:' ',selectImg:require('../assets/bottom/my-select.png'),backgoundImg:require('../assets/bottom/my.png'),url:'/mine'},
          ]
      }
  },
  methods:{
      goUrl(val){
          this.$router.push(val);
      }
  }
}
</script>

<style lang="scss" scoped>
    .bottom-box{
        position: fixed;
        bottom: 0;
        height: 50px;
        left: 0;
        width: 100%;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        border-top: 1px solid #ccc;
        div{
            width: 20%;
            height: 50px;
            text-align: center;
            font-size: 12px;
            img{
                width: 20px;
                height: 20px;
                display: block;
                margin: 5px auto;
            }
        }
    }
</style>

main.js 설정

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// ， name 
import homeBottom from '@/components/bottom.vue'
// 
Vue.component("home-bottom",homeBottom)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

구성 요소 호출이 필요한 페이지

// 
<home-bottom></home-bottom>