我把
data () {
return {
isActive: 'a'
}},
中的 'a',换成'b',发表的字会变色
<template lang="html">
<p class="footer">
<p class="footer-box">
<router-link :class="{'active': isActive === 'a'}" @click="select('a')" to="/" class="item">首页</router-link>
<router-link :class="{'active': isActive === 'b'}" @click="select('b')" to="/create" class="item">发表</router-link>
<router-link :class="{'active': isActive === 'c'}" @click="select('c')" to="/message" class="item">消息</router-link>
<router-link :class="{'active': isActive === 'd'}" @click="select('d')" to="/user" class="item">我的</router-link>
</p></p>
</template>
<script>
export default {
data () {
return {
isActive: 'a'
}},
methods: {
select (value) {
this.isActive = value
}}
}
</script>
<style lang="less">
.footer {
position: fixed;
left: 0;
bottom: 0;
height: 50px;
width: 100%;
background-color: #fff;
border-top: 1px solid #bbb;
.footer-box {
display: flex;
height: 50px;
width: 100%;
line-height: 40px;
.item {
flex: 1;
text-align: center;
}
}}
.active {
color: #41B883;}
</style>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你写的太复杂了，这个完全可以在配置路由的时候写一个linkActiveClass搞定的，建议去看看vue-router的文档
配置可以写在main.js定义路由里面
const router = new VueRouter({
})
然后在你的.vue样式里加上.active{color: #41B883;}的样式就行了
router-link写成这样<router-link to="/" class="item">首页</router-link>
换成@click.native应该就行了，当然楼上的方法更好
将click事件换成@click.native="select('a')"；
写这种导航时，我通常是用这样的方法，v-for
<ul>
</ul>
data(){
你可以定义选定后的样式 .act-bar{}
直接这样就行了在.router-link-active设置的颜色，就是你当前点击的router-link那一块，激活后的样式颜色，也可以设置其他样式，然后其他的router-link，会恢复默认的样式