video-maker/frontend/src/router/index.ts

import { createRouter, createWebHistory } from "vue-router";
import RouterComponent from '@/components/RouterComponent.vue';
import { useMainStore } from "@/stores/main";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: '/',
      component: () => import(/* webpackChunkName: "start" */ '@/views/main/Start.vue'),
      children: [
        {
          path: 'login',
          name: 'login',
          // route level code-splitting
          // this generates a separate chunk (about.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import(/* webpackChunkName: "login" */ '@/views/Login.vue'),
        },
        {
          path: 'signup',
          name: 'signup',
          component: () => import(/* webpackChunkName: "login" */ '@/views/Signup.vue'),
        },
        {
          path: 'recover-password',
          name: 'recover-password',
          component: () => import(/* webpackChunkName: "recover-password" */ '@/views/PasswordRecovery.vue'),
        },
        {
          path: 'reset-password',
          name: 'reset-password',
          component: () => import(/* webpackChunkName: "reset-password" */ '@/views/ResetPassword.vue'),
        },
        {
          path: 'qrcode',
          name: 'qrcode',
          component: () => import(/* webpackChunkName: "reset-password" */ '@/views/Qrcode.vue'),
        },
        {
          path: 'yt-views',
          name: 'yt-views',
          component: () => import('@/views/YTViews.vue'),
        },
        {
          path: 'test-yt-views',
          name: 'test-yt-views',
          component: () => import('@/views/TestYTViews.vue'),
        },
        {
          path: 'main',
          name: 'main',
          component: () => import(/* webpackChunkName: "main" */ '@/views/main/Main.vue'),
          children: [
            {
              path: 'dashboard',
              name: 'dashboard',
              component: () => import(/* webpackChunkName: "main-dashboard" */ '@/views/main/Dashboard.vue'),
            },
            {
              path: 'make-video',
              name: 'make-video',
              component: () => import('@/views/main/Upload.vue'),
            },
            {
              path: 'make-article',
              name: 'make-article',
              component: () => import('@/views/main/Article.vue'),
            },
            {
              path: 'make-image',
              name: 'make-image',
              component: () => import('@/views/main/Image.vue'),
            },
            {
              path: 'progress',
              name: 'progress',
              component: () => import('@/views/main/Progress.vue'),
            },
            // {
            //   path: 'yt-views',
            //   name: 'yt-views',
            //   component: () => import('@/views/main/YTViews.vue'),
            // },
            {
              path: 'profile',
              name: 'profile',
              component: RouterComponent,
              redirect: "/main/profile/view",
              children: [
                {
                  path: 'view',
                  name: 'view',
                  component: () => import(
                    /* webpackChunkName: "main-profile" */ '@/views/main/profile/UserProfile.vue'),
                },
                {
                  path: 'edit',
                  name: 'edit',
                  component: () => import(
                    /* webpackChunkName: "main-profile-edit" */ '@/views/main/profile/UserProfileEdit.vue'),
                },
                {
                  path: 'password',
                  name: 'password',
                  component: () => import(
                    /* webpackChunkName: "main-profile-password" */ '@/views/main/profile/UserProfileEditPassword.vue'),
                },
              ],
            },
            {
              path: 'admin',
              name: 'admin',
              component: () => import(/* webpackChunkName: "main-admin" */ '@/views/main/admin/Admin.vue'),
              redirect: '/main/admin/users/all',
              children: [
                {
                  path: 'users',
                  name: 'users',
                  redirect: '/main/admin/users/all',
                },
                {
                  path: 'users/all',
                  name: 'all-users',
                  component: () => import(
                    /* webpackChunkName: "main-admin-users" */ '@/views/main/admin/AdminUsers.vue'),
                },
                {
                  path: 'users/edit/:id',
                  name: 'main-admin-users-edit',
                  component: () => import(
                    /* webpackChunkName: "main-admin-users-edit" */ '@/views/main/admin/EditUser.vue'),
                },
                {
                  path: 'users/create',
                  name: 'main-admin-users-create',
                  component: () => import(
                    /* webpackChunkName: "main-admin-users-create" */ '@/views/main/admin/CreateUser.vue'),
                },
                {
                  path: 'test-celery',
                  name: 'test-celery',
                  component: () => import(
                    /* webpackChunkName: "main-admin-users-create" */ '@/views/main/admin/TestCelery.vue'),
                },
                {
                  path: 'test-ecpay',
                  name: 'test-ecpay',
                  component: () => import(
                    /* webpackChunkName: "main-admin-users-create" */ '@/views/main/admin/TestECPay.vue'),
                },
              ],
            },
          ],
        },
      ]
    },
  ],
});

export default router;