vue中类名和组件经过刷新不对应的解决办法

　　方法一：

页面路由如下：

index.js路由文件如下：

 {
       path: '/myOrder',
       name: '我的订单',
       menuShow: true,
       component: myOrder,
       children: [
         {path: 'totleOrder', name: '全部订单',meta:{index:1}, menuShow: true, component: totleOrder},
         {path: 'ordering', name: '进行中', meta:{index:2},menuShow: true, component: ordering},
         {path: 'ordered', name: '已完成',meta:{index:3}, menuShow: true, component: ordered},
         {path: 'orderPass', name: '已取消',meta:{index:4}, menuShow: true, component: orderPass}
       ],
       redirect: '/myOrder/totleOrder'
     }

HTML页面设置active如下：

 <template>
 <div class="bg">
   <div class="top-line">
     <div class="top-title" v-bind:class="{ 'active':$route.meta.index===1 }"><router-link to="/myOrder/totleOrder">全部({{TotalLength}})</router-link></div>
     <div class="top-title" v-bind:class="{ 'active':$route.meta.index===2 }"><router-link to="/myOrder/ordering">进行中({{IngLength}})</router-link></div>
     <div class="top-title" v-bind:class="{ 'active':$route.meta.index===3 }"><router-link to="/myOrder/ordered">已完成({{EdLength}})</router-link></div>
     <div class="top-title" v-bind:class="{ 'active':$route.meta.index===4 }"><router-link to="/myOrder/orderPass">已取消({{PassLength}})</router-link></div>
   </div>
   <router-view></router-view>
 </div>
 </template>

　　方法二：

index.js路由文件如下

 {
       path: '/myOrder',
       name: '我的订单',
       menuShow: true,
       component: myOrder,
       children: [
         {path: 'totleOrder', name: '全部订单', menuShow: true, component: totleOrder},
         {path: 'ordering', name: '进行中', menuShow: true, component: ordering},
         {path: 'ordered', name: '已完成', menuShow: true, component: ordered},
         {path: 'orderPass', name: '已取消', menuShow: true, component: orderPass}
       ],
       redirect: '/myOrder/totleOrder'
     }

HTML代码如下：

 <template>
 <div class="bg">
   <div class="top-line">
     <div class="top-title" v-bind:class="{'active':/totleOrder/.test($route.path)}"><router-link to="/myOrder/totleOrder">全部({{TotalLength}})</router-link></div>
     <div class="top-title" v-bind:class="{'active':/ordering/.test($route.path)}"><router-link to="/myOrder/ordering">进行中({{IngLength}})</router-link></div>
     <div class="top-title" v-bind:class="{'active':/ordered/.test($route.path)}"><router-link to="/myOrder/ordered">已完成({{EdLength}})</router-link></div>
     <div class="top-title" v-bind:class="{'active':/orderPass/.test($route.path)}"><router-link to="/myOrder/orderPass">已取消({{PassLength}})</router-link></div>
   </div>
   <router-view></router-view>
 </div>
 </template>

　　方法三：

index.js文件如下：

 {
       path: '/myOrder',
       name: '我的订单',
       menuShow: true,
       component: myOrder,
       children: [
         {path: 'totleOrder', name: '全部订单', menuShow: true, component: totleOrder},
         {path: 'ordering', name: '进行中', menuShow: true, component: ordering},
         {path: 'ordered', name: '已完成', menuShow: true, component: ordered},
         {path: 'orderPass', name: '已取消', menuShow: true, component: orderPass}
       ],
       redirect: '/myOrder/totleOrder'
     }

HTML代码：

 <template>
 <div class="bg">
   <div class="top-line">
     <div class="top-title" v-bind:class="{'active':$route.name=='全部订单'}"><router-link to="/myOrder/totleOrder">全部({{TotalLength}})</router-link></div>
     <div class="top-title" v-bind:class="{'active':$route.name=='进行中'}"><router-link to="/myOrder/ordering">进行中({{IngLength}})</router-link></div>
     <div class="top-title" v-bind:class="{'active':$route.name=='已完成'}"><router-link to="/myOrder/ordered">已完成({{EdLength}})</router-link></div>
     <div class="top-title" v-bind:class="{'active':$route.name=='已取消'}"><router-link to="/myOrder/orderPass">已取消({{PassLength}})</router-link></div>
   </div>
   <router-view></router-view>
 </div>
 </template>

　　方法四：

index.js文件：

  {
       path: '/myOrder',
       name: '我的订单',
       menuShow: true,
       component: myOrder,
       children: [
         {path: 'totleOrder', name: '全部订单', menuShow: true, component: totleOrder},
         {path: 'ordering', name: '进行中', menuShow: true, component: ordering},
         {path: 'ordered', name: '已完成', menuShow: true, component: ordered},
         {path: 'orderPass', name: '已取消', menuShow: true, component: orderPass}
       ],
       redirect: '/myOrder/totleOrder'
     }

HTML文件代码：

 <template>
 <div class="bg">
   <div class="top-line">
     <div class="top-title" v-bind:class="{ active:$route.path==='/myOrder/totleOrder' }"><router-link to="/myOrder/totleOrder">全部({{TotalLength}})</router-link></div>
     <div class="top-title" v-bind:class="{ active:$route.path==='/myOrder/ordering' }"><router-link to="/myOrder/ordering">进行中({{IngLength}})</router-link></div>
     <div class="top-title" v-bind:class="{ active:$route.path==='/myOrder/ordered' }"><router-link to="/myOrder/ordered">已完成({{EdLength}})</router-link></div>
     <div class="top-title" v-bind:class="{ active:$route.path==='/myOrder/orderPass' }"><router-link to="/myOrder/orderPass">已取消({{PassLength}})</router-link></div>
   </div>
   <router-view></router-view>
 </div>
 </template>

四种办法都可以解决刷新页面active和组件不对应的问题。