THJ_Mobile/src/packages/mobile/router/index.ts

import { createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { useLoginStore } from '@/stores'
import service from '@/services'
import Page from '@mobile/components/layouts/page/index.vue'
import animateRouter from './animateRouter'

const { getToken } = useLoginStore()

const routes: Array<RouteRecordRaw> = [
  {
    path: '/:pathMatch(.*)*',
    name: 'error',
    component: () => import('../views/error/404.vue'),
    meta: {
      ignoreAuth: true,
    },
  },
  {
    path: '/boot',
    name: 'boot',
    component: () => import('../views/boot/index.vue'),
    meta: {
      ignoreAuth: true,
    },
  },
  {
    path: '/',
    component: Page,
    children: [
      {
        path: '',
        name: 'home',
        component: () => import('../views/home/index.vue'),
      }
    ]
  },
  {
    path: '/login',
    component: Page,
    children: [
      {
        path: '',
        name: 'login',
        component: () => import('../views/user/login/index.vue'),
        meta: {
          ignoreAuth: true,
        },
      }
    ]
  },
  {
    path: '/logoff',
    component: Page,
    children: [
      {
        path: '',
        name: 'logoff',
        component: () => import('../views/user/logoff/index.vue'),
      }
    ]
  },
  {
    path: '/register',
    component: Page,
    children: [
      {
        path: '',
        name: 'register',
        component: () => import('../views/user/register/index.vue'),
        meta: {
          ignoreAuth: true,
        },
      }
    ]
  },
  {
    path: '/forget',
    component: Page,
    children: [
      {
        path: '',
        name: 'forget',
        component: () => import('../views/user/forget/index.vue'),
        meta: {
          ignoreAuth: true,
        },
      },
    ]
  },
  {
    path: '/account',
    component: Page,
    children: [
      {
        path: 'certification',
        name: 'account-certification',
        component: () => import('../views/account/certification/index.vue'),
        meta: {
          ignoreAuth: true,
        },
      }
    ]
  },
  {
    path: '/news',
    component: Page,
    children: [
      {
        path: 'details',
        name: 'news-details',
        component: () => import('../views/news/details/index.vue'),
        meta: {
          ignoreAuth: true,
        },
      },
      {
        path: 'list',
        name: 'news-list',
        component: () => import('../views/news/list/index.vue'),
        meta: {
          ignoreAuth: true,
        },
      }
    ]
  },
  {
    path: '/product',
    component: Page,
    children: [
      {
        path: 'product',
        name: 'product',
        component: () => import('../views/product/index.vue'),
        meta: {
          ignoreAuth: true,
        },
      },
      {
        path: 'productdetail',
        name: 'product-detail',
        component: () => import('../views/product/detail/index.vue'),
        meta: {
          ignoreAuth: true,
        },
      }
    ]
  },
  {
    path: '/goods',
    component: Page,
    children: [
      {
        path: 'details',
        name: 'goods-details',
        component: () => import('../views/goods/details/index.vue'),
        meta: {
          ignoreAuth: true,
        },
      }
    ]
  },
  {
    path: '/market',
    component: Page,
    children: [
      {
        path: '',
        name: 'market',
        component: () => import('../views/market/main/index.vue'),
      },
      {
        path: 'detail',
        name: 'market-detail',
        component: () => import('../views/market/details/index.vue'),
      }
    ]
  },
  {
    path: '/bank',
    component: Page,
    children: [
      {
        path: 'bank',
        name: 'bank-wallet',
        component: () => import('../views/bank/wallet/index.vue'),
      },
      {
        path: 'sign',
        name: 'bank-sign',
        component: () => import('../views/bank/sign/index.vue'),
      },
      {
        path: 'edit',
        name: 'add-banksign',
        component: () => import('../views/bank/sign/components/edit/index.vue'),
      },
      {
        path: 'statement',
        name: 'bank-statement',
        component: () => import('../views/bank/statement/index.vue'),
      },
      {
        path: 'hisstatement',
        name: 'bank-hisstatement',
        component: () => import('../views/bank/hisstatement/index.vue'),
      },
    ]
  },
  {
    path: '/order',
    component: Page,
    children: [
      {
        path: 'order',
        name: 'my-order',
        component: () => import('../views/mine/order/index.vue'),
      },
      {
        path: 'purchasetrade',
        name: 'purchase-trade',
        component: () => import('../views/mine/order/components/purchasetrade/index.vue'),
      },
      {
        path: 'wrorder',
        name: 'wr-order',
        component: () => import('../views/mine/order/components/wrorder/index.vue'),
      },
      {
        path: 'wrtrade',
        name: 'wr-trade',
        component: () => import('../views/mine/order/components/wrtrade/index.vue'),
      },
      {
        path: 'purchasetradedetail',
        name: 'purchase-trade-detail',
        component: () => import('../views/mine/order/purchasetradedetail/index.vue'),
      }
    ]
  },
  {
    path: '/rules',
    component: Page,
    children: [
      {
        path: 'ptgz',
        name: 'rules-ptgz',
        component: () => import('../views/rules/ptgz/index.vue'),
      },
      {
        path: 'myrz',
        name: 'rules-myrz',
        component: () => import('../views/rules/myrz/index.vue'),
      },
      {
        path: 'ccwl',
        name: 'rules-ccwl',
        component: () => import('../views/rules/ccwl/index.vue'),
      },
      {
        path: 'zcxy',
        name: 'rules-zcxy',
        component: () => import('../views/rules/zcxy/index.vue'),
        meta: {
          ignoreAuth: true,
        },
      },
      {
        path: 'yszc',
        name: 'rules-yszc',
        component: () => import('../views/rules/yszc/index.vue'),
        meta: {
          ignoreAuth: true,
        },
      },
      {
        path: 'gywm',
        name: 'rules-gywm',
        component: () => import('../views/rules/gywm/index.vue'),
      },
    ]
  },
  {
    path: '/credit',
    component: Page,
    children: [
      {
        path: 'signin',
        name: 'credit-signin',
        component: () => import('../views/credit/signin/index.vue'),
      },
      {
        path: 'statement',
        name: 'credit-statement',
        component: () => import('../views/credit/statement/index.vue'),
      },
      {
        path: 'lottery',
        name: 'credit-lottery',
        component: () => import('../views/credit/lottery/index.vue'),
      },
    ]
  },
  {
    path: '/mine',
    component: Page,
    children: [
      {
        path: 'generalize',
        name: 'mine-generalize',
        component: () => import('../views/mine/generalize/index.vue'),
      },
      {
        path: 'service',
        name: 'mine-service',
        component: () => import('../views/mine/service/index.vue'),
      },
      {
        path: 'address',
        name: 'mine-address',
        component: () => import('../views/mine/address/index.vue'),
      },
    ]
  },
  {
    path: '/setting',
    component: Page,
    children: [
      {
        path: '',
        name: 'setting',
        component: () => import('../views/setting/main/index.vue'),
      },
      {
        path: 'password',
        name: 'setting-password',
        component: () => import('../views/setting/password/index.vue'),
      },
    ]
  }
]

const router = animateRouter.create({
  history: createWebHashHistory(),
  routes,
})

// 路由跳转拦截
router.beforeEach((to, from, next) => {
  // 判断服务是否加载完成
  if (service.isReady) {
    if (to.meta.ignoreAuth || getToken()) {
      next();
    } else {
      next({
        name: 'login',
        query: { redirect: to.fullPath },
      });
    }
  } else {
    if (to.name === 'boot' || to.name === 'login') {
      next();
    } else {
      next({
        name: 'boot',
        query: { redirect: to.fullPath },
      });
    }
  }
})

export default router