Lexus-media/src/components/Navigation.vue

<template>
  <div class="navigation">
    <p class="fixedTitle">经销商社交媒体数据平台</p>
    <div v-for="(nav, index) in navTitle" :key="index">
      <span>></span>
      <p @click="changepage(nav.url)">{{nav.title}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    navTitle: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    changepage: function(url) {
      // this.$router.push({ path: url });
      console.log(url);
    }
  }
};
</script>

<style scoped lang="less">
.navigation {
  width: 1190px;
  height: 20px;
  line-height: 20px;
  margin: 4px auto;
  display: flex;
  .fixedTitle {
    font-size: 12px;
    height: 20px;
    line-height: 20px;
  }
  div{
    display: flex;
    span{
      margin: 0 5px;
    }
    p{
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      // &:hover{
      //   cursor: pointer;
      // }
    }
  }
}
</style>