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";
import Body from "@/layout/Body.vue";
import Auth from "@/module/auth/Auth.vue";
import LoginPage from "@/module/auth/LoginPage.vue";
import Default from "@/pages/dashboards/Default.vue";
import Project from "@/pages/dashboards/Project.vue";
import Ecommerce from "@/pages/dashboards/Ecommerce.vue";
const router = createRouter({
history: createWebHistory('/edmin/'),
routes: [
{
path: "/auth",
component: Auth,
children: [
{
path: "login",
name: "login",
component: LoginPage,
meta: {
title: "edmin - Premium Vue Admin Template",
},
},
],
},
{
path: "",
redirect: "/dashboards/dashboard_default",
},
{
path: "/dashboards",
component: Body,
children: [
{
path: "dashboard_default",
name: "default",
component: Default,
meta: {
mainTitle: "Default dashboard",
title: "Dashboards | edmin - Premium Vue Admin Template",
breadcrumb: [{ text: "Dashboard", subText: "Default" }],
},
},
{
path: "dashboard_project",
name: "project",
component: Project,
meta: {
mainTitle: "Project Dashboard",
title: "Project Dashboard | edmin - Premium Vue Admin Template",
breadcrumb: [{ text: "Dashboard", subText: "Project" }],
},
},
{
path: "dashboard_ecommerce",
name: "ecommerce",
component: Ecommerce,
meta: {
mainTitle: "Ecommerce Dashboard",
title: "Ecommerce Dashboard | edmin - Premium Vue Admin Template",
breadcrumb: [{ text: "Dashboard", subText: "Ecommerce" }],
},
},
],
},
]
});
export default router