lanecarford_front/src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import { useGenerateStore } from '@/stores/modules/generate'
const VerifyIDs = (num: number) => {
  return true
  const ids = [
    !!useGenerateStore().customerId,
    !!useGenerateStore().visitRecordId,
    !!useGenerateStore().styleId,
    // !!useGenerateStore().modelPhotoId,
    true,
    !!useGenerateStore().originalTryOnId
  ]
  return ids.splice(0, num).every((id) => id) ? true : '/stylist/customer'
}

/**
 * 路由缓存机制:
 * 1. 设置路由的meta属性为{ cache: true }，表示需要缓存
 * 2. App.vue中使用RouteCache组件，通过路由的name来进行匹配
 * 3. 路由的name默认是文件名,如果文件名与name不一致,通过defineOptions({ name: 'componentName' })来设置
 *
 * 自定义验证规则：
 * meta：{ verify: （）=> boolean || string }
 * 1. boolean true 跳转 false 不跳转
 * 2. string 跳转的路由path
 */

/** 验证id
 * @param num 验证id的数量1-5
 * 1. 顾客id
 * 2. 进店记录id
 * 3. 服装id
 * 4. 模特照片id
 * 5. 原始试穿id-优先AI魔改
 * @returns boolean
 */
const router = createRouter({
  history: createWebHistory('/'),
  //   history: createWebHistory(import.meta.env.VITE_APP_URL),
  routes: [
    {
      path: '/',
      redirect: '/welcome'
    },
    {
      path: '/login',
      name: 'LoginPage',
      component: () => import('@/views/login/LoginPage.vue')
    },
    {
      path: '/reset',
      name: 'ResetPage',
      component: () => import('@/views/login/ResetPage.vue')
    },
    {
      path: '/signup',
      name: 'SignupPage',
      component: () => import('@/views/login/SignupPage.vue')
    },
    {
      path: '/welcome',
      name: 'WelcomePage',
      component: () => import('@/views/login/WelcomePage.vue')
    },
    {
      path: '/customer',
      name: 'customer',
      component: () => import('@/views/login/customer.vue')
    },
    {
      path: '/asistant',
      name: 'asistant',
      component: () => import('../views/asistant/index.vue'),
      meta: { cache: true, verify: () => VerifyIDs(2) }
    },
    {
      path: '/workshop',
      name: 'Workshop',
      component: () => import('../views/Workshop/index.vue'),
      children: [
        // {
        //   path: '/workshop',
        //   redirect: '/workshop/selectStyle'
        // },
        {
          path: '/workshop/home',
          name: 'Home',
          component: () => import('@/views/Workshop/home.vue')
        },
        {
          path: '/workshop/homeNav',
          name: 'HomeNav',
          component: () => import('@/views/Workshop/homeNav.vue')
        },
        {
          path: '/workshop/stylist',
          name: 'StylistPage',
          redirect: '/workshop/stylist/index',
          component: () => import('@/views/stylist/container.vue'),
          children: [
            {
              path: 'index',
              name: 'index',
              component: () => import('@/views/stylist/index.vue'),
              meta: { verify: () => VerifyIDs(2) }
            },
            {
              path: 'sex',
              name: 'sex',
              component: () => import('@/views/stylist/sex.vue'),
              meta: { verify: () => VerifyIDs(2) }
            },
            {
              path: 'dressfor',
              name: 'dressfor',
              component: () => import('@/views/stylist/dressfor.vue'),
              meta: { verify: () => VerifyIDs(2) }
            }
          ]
        },
        {
          path: '/workshop/selectStyle',
          name: 'selectStyle',
          component: () => import('../views/Workshop/selectStyle.vue'),
          meta: { verify: () => VerifyIDs(2) }
        },
        {
          path: '/workshop/selectModel',
          name: 'SelectModel',
          component: () => import('../views/Workshop/selectModel.vue'),
          meta: { verify: () => VerifyIDs(3) }
        },
        {
          path: '/workshop/product',
          name: 'product',
          component: () => import('../views/Workshop/product.vue'),
          meta: { verify: () => VerifyIDs(4) }
        },
        {
          // 推荐try on
          path: '/workshop/recommended',
          name: 'recommended',
          component: () => import('../views/Workshop/recommended.vue'),
          meta: { verify: () => VerifyIDs(5) }
        },
        {
          // 上传照片1
          path: '/workshop/uploadFace',
          name: 'uploadFace',
          component: () => import('../views/Workshop/uploadFace1.vue'),
          meta: { verify: () => VerifyIDs(5) }
        },
        {
          // 上传照片2
          path: '/workshop/uploadFace2',
          name: 'uploadFace2',
          component: () => import('../views/Workshop/uploadFace2.vue'),
          meta: { verify: () => VerifyIDs(5) }
        },
        {
          // 自定义创作
          path: '/workshop/customize',
          name: 'customize',
          component: () => import('../views/Workshop/customize.vue'),
          meta: { verify: () => VerifyIDs(5) }
        },
        {
          // library
          path: '/workshop/library',
          name: 'library',
          component: () => import('../views/Workshop/library.vue'),
          meta: { verify: () => VerifyIDs(2) }
        },
        {
          path: '/workshop/profile',
          name: 'profile',
          component: () => import('../views/Workshop/profile.vue'),
          meta: { verify: () => VerifyIDs(1) }
        },
        {
          // creation
          path: '/workshop/creation',
          name: 'creation',
          component: () => import('../views/Workshop/creation/index.vue'),
          meta: { verify: () => VerifyIDs(2) }
        },
        {
          // 完成创建
          path: '/workshop/end',
          name: 'end',
          component: () => import('../views/Workshop/end.vue'),
          meta: { verify: () => VerifyIDs(2) }
        }
      ]
    }
  ]
})

export default router