vue 导航栏跳转、选中效果

方法一：组件传值（父组件传值导航栏组件）

父组件代码

<template>
	<div id="brand">
		<Header :ishidden="false" :active="active"></Header>   //组件传值active
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from "../components/Header.vue"
	import Footer from "../components/Footer.vue"
	export default {
		data() {
			return {
				active:"/brand"                                 
			}
		},
		mounted() {
			
		},
		methods: {
			
		},
		components: {
			Header,Footer
		}
	}
</script>

子组件代码

<template>
<div class="header">
		<div :class="ishidden==true?'header-top':'no-header'">
			<img class="logo" src="../assets/image/logo.png" />
			<div class="m-navBg" @click="NavClose"></div>
			<ul class="nav">
				<li v-for="navs in nav">
				<router-link :class="active==navs.href?'active':'non'" :to="navs.href" @click.native="istem(navs.href)">{{ navs.title }}</router-link>
				</li>   
				//通过组件传值获取active 并用三目添加class
			</ul>
		</div>
</div>
</template>
<script>
export default { 
	name: 'Header',
  	props:{                       //子组件获取传值
		ishidden: '',
		active: ''
	},
	data() {
		return {
		}
	},
	mounted() {
			
	},
	methods: {
		
	},
}
</script>

方法二：导航栏组件获取当前页面网址

父组件代码

<template>
	<div id="brand">
		<Header :ishidden="false"></Header>   //ishidden是判断显示隐藏banner
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from "../components/Header.vue"
	import Footer from "../components/Footer.vue"
	export default {
		data() {
			return {

			}
		},
		mounted() {
			
		},
		methods: {
			
		},
		components: {
			Header,Footer
		}
	}
</script>

子组件代码

<template>
	<div class="header">
		<div :class="ishidden==true?'header-top':'no-header'">
			<img class="logo" src="../assets/image/logo.png" />
			<div class="m-navBg" v-on:click="NavClose"></div>
			<ul class="nav">
				<li v-for="navs in nav">
					<router-link :class="isSelect==navs.href?'active':'non'" :to="navs.href" @click.native="istem(navs.href)">{{ navs.title }}</router-link>
					//router-link 执行点击事件的方法@click.native
					</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'Header',
		data() {
			return {
				isSelect: '/',                 //默认选中主页
			}
		}，
		created: function () {
			this.isSelect = this.$route.path;  //获取当前页网址并赋值给isSelect
		}
	}
</script>

方法三：使用本地存储 （这里就不做过多介绍）

注：以上方法亲测有效