vue使用element-ui，页面刷新，导航栏跳转问题（解决）

产生的原因

原因是在使用组件时，设置了默认选中，因此页面刷新，导航发生了变化，而路由及页面并未改变

:default-active="activeIndex"
 data() {
      return {
        activeIndex: '1',
      };
    },

解决办法

第一步，同样还是要使用默认选中

:default-active="leftNavActive"//这个leftNavActive变量并不在data当中

第二步，使用计算属性，配合路由使用，这一步解决纵向导航栏的问题

  computed: {
            leftNavActive: {
                get: function () {
                    let arr = this.$route.path.split('/');
                    switch (arr[3]) {
                        case 'PurchaseOrder':
                            return '/Main/Order'
                        case 'ReturnsOrder':
                            return '/Main/Order'
                        case 'StatisticDelivery':
                            return '/Main/Order'
                        case 'StatisticOrder':
                            return '/Main/Order'
                        case 'GoodsList':
                            return '/Main/Goods'
                        case 'GoodsCollection':
                            return '/Main/Goods'
                        case 'GoodsCart':
                            return '/Main/Goods'
                        case 'CapitalAccount':
                            return '/Main/Money'
                        case 'PaymentDetails':
                            return '/Main/Money'
                    }
                }
            },
            set: function () {
            }

        },

第三步，使用计算属性，解决横向导航的问题，方法与前面类似

   computed: {
            ActiveIndex: {
                get: function () {
                    return this.$route.path;
                },
                set: function () {
                }
            },
        }

路由代码，仅供参考

   {
        path: '/Main/Order',
        name:'Order',
        component: ()=>import('../components/public/OrderNav.vue'),
        meta: {
          isLogin: true,
          roles: ['admin'],
        },
        children:[
          {
            path: '/Main/Order',
            redirect: '/Main/Order/PurchaseOrder',
          },
          {
            path: '/Main/Order/PurchaseOrder',
            name: 'PurchaseOrder',
            component: ()=>import('../views/order/PurchaseOrder.vue'),
            meta: {
              isLogin: true,
              roles: ['admin'],
            },
          },
          {
            path: '/Main/Order/ReturnsOrder',
            name: 'ReturnsOrder',
            component: ()=>import('../views/order/ReturnsOrder.vue'),
            meta: {
              isLogin: true,
              roles: ['admin'],
            },
          },
          {
            path: '/Main/Order/StatisticDelivery',
            name: 'StatisticDelivery',
            component: ()=>import('../views/order/StatisticDelivery.vue'),
            meta: {
              isLogin: true,
              roles: ['admin'],
            },
          },
          {
            path: '/Main/Order/StatisticOrder',
            name: 'StatisticOrder',
            component: ()=>import('../views/order/StatisticOrder.vue'),
            meta: {
              isLogin: true,
              roles: ['admin'],
            },
          },
        ]
      },

效果图

如果对面包屑感兴趣可以去看另一篇文章vue使用element-ui，动态渲染导航栏和面包屑