方法一:组件传值(父组件传值导航栏组件)
父组件代码
<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>
方法三:使用本地存储 (这里就不做过多介绍)
注:以上方法亲测有效