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>

總結

以上是生活随笔為你收集整理的Vue导航点击路由跳转后样式不变的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。