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和组件不对应的问题。

 

posted @ 2019-01-16 11:50  叶庚的博客  阅读(548)  评论(0)    收藏  举报