vue-ptc/src/router.ts

import { createRouter, createWebHistory } from 'vue-router'
import { state } from './store'
import NProgress from 'nprogress'
import Dashboard from './pages/dashboard/index.vue'
import NotFound from './pages/404'

NProgress.configure({ showSpinner: false })

declare module 'vue-router' {
  interface RouteMeta {
    auth?: boolean
  }
}

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  scrollBehavior() {
    return { top: 0, left: 0 }
  },
  routes: [
    {
      path: '/login',
      component: () => import('./pages/login/index.vue'),
    },
    {
      path: '/register',
      component: () => import('./pages/register/index.vue'),
    },
    {
      path: '/password/:action',
      component: () => import('./pages/password/index.vue'),
      props: true,
    },
    {
      path: '/imei/:action',
      component: () => import('./pages/imei/index.vue'),
      props: true,
      meta: { auth: true },
    },
    {
      path: '/fill-order',
      component: () => import('./pages/fill-order/index.vue'),
    },
    {
      path: '/pay-result/:status',
      component: () => import('./pages/pay-result/index.vue'),
    },
    {
      path: '/account',
      component: () => import('./pages/account/index.vue'),
      meta: { auth: true },
    },
    {
      path: '/order',
      component: () => import('./pages/my-order/index.vue'),
      meta: { auth: true },
    },
    {
      path: '/order/:id',
      component: () => import('./pages/benefits/index.vue'),
      meta: { auth: true },
    },
    {
      path: '/gift-card',
      component: () => import('./pages/gift-card/index.vue'),
      meta: { auth: true },
    },
    {
      path: '/mailing',
      component: () => import('./pages/mailing/index.vue'),
      meta: { auth: true },
    },
    {
      path: '/renewal',
      component: () => import('./pages/renewal/index.vue'),
      meta: { auth: true },
    },
    {
      path: '/repair/appointment',
      component: () => import('./pages/repair/appointment.vue'),
      meta: { auth: true },
    },
    {
      path: '/repair/history',
      component: () => import('./pages/repair/history.vue'),
      meta: { auth: true },
    },
    {
      path: '/invite',
      component: () => import('./pages/invite/index.vue'),
      meta: { auth: true },
    },
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { auth: true },
    },
    {
      path: '/:pathMatch(.*)*',
      name: 'NotFound',
      component: NotFound,
    },
  ],
})

router.beforeEach(to => {
  if (to.meta.auth && !state.userInfo) {
    return {
      path: '/login',
      query: {
        from: to.fullPath,
      },
      replace: true,
    }
  }
  NProgress.start()
})
router.afterEach(() => {
  state.ready = true
  NProgress.done()
})
router.onError(() => {
  NProgress.status = null
  NProgress.remove()
})

export default router