nuxtProject/components/bottomMenu.vue

<template>
  <div class="bottom-btn-box mta-hidden-sm">
      <el-menu
        :default-active="activeNav"
        :class="navClass"
        mode="horizontal"
        :router="false"
      >
        <template v-for="(item,index) in footerData" >
          <el-menu-item :index="`${item.url}`" >
            <nuxt-link  :to="item.url"><i></i><span>{{item.name}}</span></nuxt-link>
          </el-menu-item>
        </template>
      </el-menu>
  </div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex';

  export default {
    name: 'mtaFooter',
    computed: {
      activeNav() {
        return this.getActiveNav;
      },
      ...mapGetters(['getActiveNav']),
    },
    data() {
      return {
        navClass:'head-nav-up',
        footerData: [
          {
            name: '首页',
            url: '/',
          },
          {
            name: '体验中心',
            url: '/tiyanCenter',
          },
          {
            name: '电话咨询',
            url: 'tel:400-052-2130',
          },
          {
            name: '在线咨询',
            url: 'http://p.qiao.baidu.com/cps/chat?siteId=11735491&amp;userId=10530011',
          }

        ]
      }
    },

    methods: {

    },
  }
</script>