Vue导航点击路由跳转后样式不变
<template><ul><li :class="{active:isActive==1}" @click="myOrder(1)">统计分析</li><li :class="{active:isActive==2}" @click="myOrder(2)">订单中心</li><li :class="{active:isActive==3}" @click="myOrder(3)">组织架构</li><li :class="{active:isActive==4}" @click="myOrder(4)">审核设置</li></ul>
</template>
<script>export default{data(){return{isActive: 0,}},mounted(){if(this.$route.query.item){this.isActive = this.$route.query.item;}else{this.isActive = 0;}},methods:{myOrder(i){this.isActive = i;if(i == 1){this.$router.replace({path:'/'+ this.route_url + '/personal',query: {item: i,}})}else if(i == 2){this.$router.replace({path:'/'+ this.route_url + '/ordercenter',query: {item: i,}})}else if(i == 3){this.$router.replace({path:'/'+ this.route_url + '/framework',query: {item: i,}})}else if(i == 4){this.$router.replace({path:'/'+ this.route_url + '/purchase',query: {item: i,}})}}, mounted(){if(this.$route.query.item){this.isActive = this.$route.query.item;}else{this.isActive = 0;}},methods:{myOrder(i){this.isActive = i;if(i == 1){this.$router.replace({path:'/'+ this.route_url + '/personal',query: {item: i,}})}else if(i == 2){this.$router.replace({path:'/'+ this.route_url + '/ordercenter',query: {item: i,}})}else if(i == 3){this.$router.replace({path:'/'+ this.route_url + '/framework',query: {item: i,}})}else if(i == 4){this.$router.replace({path:'/'+ this.route_url + '/purchase',query: {item: i,}})}},}
</script>
<style>li{width: 56px;height: 64px;margin-left: 48px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;line-height: 64px;cursor: pointer;border-bottom: 2px solid transparent;}.active{border-bottom: 2px solid #FFFFFF;}
</style>
)
