tianliPc/src/components/navBar/NavBar.vue

<template>
    <div class="top-bar">
	  <div class="img">
	  	<img src="../../assets/img/logo.png" >
	  </div>
	  <div class="barbox">
        <div class="bar-item" v-for="( item, index ) in navList" :key="index" @click="navClick(item.path,index)" :class="{'action':currentUrl.indexOf(item.path) !=-1}">
        <div>{{item.title}}</div>
		<div class="xian" v-if="currentUrl.indexOf(item.path) !=-1"></div>
		</div>
	  </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
		navList: [
			{
				path: '/home',
				title: '首页',
			},
			{
				path: '/about',
				title: '关于我们',
			},
			{
				path: '/loveList',
				title: '案例展示',
			},
			{
				path: '/join',
				title: '新闻动态',
			},
			{
				path: '/donation',
				title: '节水测试',
			},
			{
				path: '/concat',
				title: '物联网登录',
			}
		],
		currentIndex: 0
	};
  },
  computed: {
	  currentUrl() {
		  return this.$route.path
	  }
  },
  methods: {
	  navClick(url,index) {
		  let currentUrl = this.$route.path
		  console.log(url)
		  console.log(currentUrl,"now")
		  if(currentUrl === url) {
			  return 
		  }else {
			  console.log("1")
			 this.currentIndex = index
			 console.log(this.currentIndex)
			 this.$router.push(url) 
		  }
		  
		  
	  }
  }
};
</script>

<style lang="scss" scoped>
.top-bar {
  max-width: 1920px;
  min-width: 1080px;
  height: 140px;
  margin: 0 auto;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  background-color: #FFFFFF;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
  letter-spacing:3px;
  margin-bottom: 24px;
  align-items:center;
  .img {
	  width: 200px;
	  height: auto;
	  img {
		  width: 100%;
		  height: auto;
	  }
  }
  .barbox {
	display: flex;
	.bar-item {
		margin-left: 30px;
		flex-grow: 1;
		align-items: center;
		font-family: PingFang SC;
		font-size: 18px;
		cursor:pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.xian {
		width: 110%;
		background: #0165B5;
		height: 3px;
		margin-top: 10px;
	}
  }
  .action {
  	// background-color: #0165B5;
	color: #0165B5
  }
}
</style>