vue中类名和组件经过刷新不对应的解决办法
方法一：
页面路由如下：
index.js路由文件如下：
1 { 2 path: '/myOrder', 3 name: '我的订单', 4 menuShow: true, 5 component: myOrder, 6 children: [ 7 {path: 'totleOrder', name: '全部订单',meta:{index:1}, menuShow: true, component: totleOrder}, 8 {path: 'ordering', name: '进行中', meta:{index:2},menuShow: true, component: ordering}, 9 {path: 'ordered', name: '已完成',meta:{index:3}, menuShow: true, component: ordered}, 10 {path: 'orderPass', name: '已取消',meta:{index:4}, menuShow: true, component: orderPass} 11 ], 12 redirect: '/myOrder/totleOrder' 13 }
HTML页面设置active如下：
1 <template> 2 <div class="bg"> 3 <div class="top-line"> 4 <div class="top-title" v-bind:class="{ 'active':$route.meta.index===1 }"><router-link to="/myOrder/totleOrder">全部({{TotalLength}})</router-link></div> 5 <div class="top-title" v-bind:class="{ 'active':$route.meta.index===2 }"><router-link to="/myOrder/ordering">进行中({{IngLength}})</router-link></div> 6 <div class="top-title" v-bind:class="{ 'active':$route.meta.index===3 }"><router-link to="/myOrder/ordered">已完成({{EdLength}})</router-link></div> 7 <div class="top-title" v-bind:class="{ 'active':$route.meta.index===4 }"><router-link to="/myOrder/orderPass">已取消({{PassLength}})</router-link></div> 8 </div> 9 <router-view></router-view> 10 </div> 11 </template>
方法二：
index.js路由文件如下
1 { 2 path: '/myOrder', 3 name: '我的订单', 4 menuShow: true, 5 component: myOrder, 6 children: [ 7 {path: 'totleOrder', name: '全部订单', menuShow: true, component: totleOrder}, 8 {path: 'ordering', name: '进行中', menuShow: true, component: ordering}, 9 {path: 'ordered', name: '已完成', menuShow: true, component: ordered}, 10 {path: 'orderPass', name: '已取消', menuShow: true, component: orderPass} 11 ], 12 redirect: '/myOrder/totleOrder' 13 }
HTML代码如下：
1 <template> 2 <div class="bg"> 3 <div class="top-line"> 4 <div class="top-title" v-bind:class="{'active':/totleOrder/.test($route.path)}"><router-link to="/myOrder/totleOrder">全部({{TotalLength}})</router-link></div> 5 <div class="top-title" v-bind:class="{'active':/ordering/.test($route.path)}"><router-link to="/myOrder/ordering">进行中({{IngLength}})</router-link></div> 6 <div class="top-title" v-bind:class="{'active':/ordered/.test($route.path)}"><router-link to="/myOrder/ordered">已完成({{EdLength}})</router-link></div> 7 <div class="top-title" v-bind:class="{'active':/orderPass/.test($route.path)}"><router-link to="/myOrder/orderPass">已取消({{PassLength}})</router-link></div> 8 </div> 9 <router-view></router-view> 10 </div> 11 </template>
方法三：
index.js文件如下：
1 { 2 path: '/myOrder', 3 name: '我的订单', 4 menuShow: true, 5 component: myOrder, 6 children: [ 7 {path: 'totleOrder', name: '全部订单', menuShow: true, component: totleOrder}, 8 {path: 'ordering', name: '进行中', menuShow: true, component: ordering}, 9 {path: 'ordered', name: '已完成', menuShow: true, component: ordered}, 10 {path: 'orderPass', name: '已取消', menuShow: true, component: orderPass} 11 ], 12 redirect: '/myOrder/totleOrder' 13 }
HTML代码：
1 <template> 2 <div class="bg"> 3 <div class="top-line"> 4 <div class="top-title" v-bind:class="{'active':$route.name=='全部订单'}"><router-link to="/myOrder/totleOrder">全部({{TotalLength}})</router-link></div> 5 <div class="top-title" v-bind:class="{'active':$route.name=='进行中'}"><router-link to="/myOrder/ordering">进行中({{IngLength}})</router-link></div> 6 <div class="top-title" v-bind:class="{'active':$route.name=='已完成'}"><router-link to="/myOrder/ordered">已完成({{EdLength}})</router-link></div> 7 <div class="top-title" v-bind:class="{'active':$route.name=='已取消'}"><router-link to="/myOrder/orderPass">已取消({{PassLength}})</router-link></div> 8 </div> 9 <router-view></router-view> 10 </div> 11 </template>
方法四：
index.js文件：
1 { 2 path: '/myOrder', 3 name: '我的订单', 4 menuShow: true, 5 component: myOrder, 6 children: [ 7 {path: 'totleOrder', name: '全部订单', menuShow: true, component: totleOrder}, 8 {path: 'ordering', name: '进行中', menuShow: true, component: ordering}, 9 {path: 'ordered', name: '已完成', menuShow: true, component: ordered}, 10 {path: 'orderPass', name: '已取消', menuShow: true, component: orderPass} 11 ], 12 redirect: '/myOrder/totleOrder' 13 }
HTML文件代码：
1 <template> 2 <div class="bg"> 3 <div class="top-line"> 4 <div class="top-title" v-bind:class="{ active:$route.path==='/myOrder/totleOrder' }"><router-link to="/myOrder/totleOrder">全部({{TotalLength}})</router-link></div> 5 <div class="top-title" v-bind:class="{ active:$route.path==='/myOrder/ordering' }"><router-link to="/myOrder/ordering">进行中({{IngLength}})</router-link></div> 6 <div class="top-title" v-bind:class="{ active:$route.path==='/myOrder/ordered' }"><router-link to="/myOrder/ordered">已完成({{EdLength}})</router-link></div> 7 <div class="top-title" v-bind:class="{ active:$route.path==='/myOrder/orderPass' }"><router-link to="/myOrder/orderPass">已取消({{PassLength}})</router-link></div> 8 </div> 9 <router-view></router-view> 10 </div> 11 </template>
四种办法都可以解决刷新页面active和组件不对应的问题。
