Pixelstrap - Admin Document

Routing

Routing is one of the most important aspects of VueJs, without it you cannot render any of you pages. When you install vue, it asks you if you want to include the router so that you do not have to build it from scratch. We recommend choosing the routing option while creating a vue project.

You can find router file on the following path:

theme >> src >> router >> index.ts

Below Given is an example of the type of code that you will write to create paths for your router.


import { createRouter, createWebHistory } from "vue-router";
const Body = () => import("@/layout/Body.vue");

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_BASE_URL),
   routes: [
   {
    path: "/auth",
    component: () => import("@/components/layout/auth/Auth.vue"),
    children: [
      {
        path: "login",
        name: "LoginPage",
        component: () => import("@/components/layout/auth/LoginPage.vue"),
      },
    ],
  },
  {
    path: routes.Dashboards.Default,
    name: "DefaultDashboard",
    component: () => import("@/pages/dashboard/Default.vue"),
    meta: {
      mainTitle: "Default Dashboard",
      title: "Default Dashboard | Mimai - Premium Vue Admin Template",
      breadcrumb: [{ text: "Dashboard", subText: "Default" }],
    },
  },
  {
    path: routes.Dashboards.ECommerce,
    name: "ECommerceDashboard",
    component: () => import("@/pages/dashboard/Ecommerce.vue"),
    meta: {
      mainTitle: "Ecommerce Dashboard",
      title: "Ecommerce Dashboard | Mimai - Premium Vue Admin Template",
      breadcrumb: [{ text: "Dashboard", subText: "E-Commerce Dashboard" }],
    },
   },
   {
    path: routes.Dashboards.Eduction,
    name: "Eduction Dashboard",
    component: () => import("@/pages/dashboard/Eduction.vue"),
    meta: {
      mainTitle: "Eduction Dashboard",
      title: "Eduction Dashboard | Mimai - Premium Vue Admin Template",
      breadcrumb: [{ text: "Dashboard", subText: "ducation Dashboard" }],
    },
   },
    {
      path: routes.Dashboards.Project,
      name: 'project',
      component: () => import("@/pages/dashboard/Project"),
      meta: {
        mainTitle: 'Project',
        title: 'Project | Mimai - Premium Vue Admin Template',
        breadcrumb: [{ text: 'Dashboard', subText: 'Project' }],
      },
     },
   ],
  },
]
);           
export default router