refactor: update router

This commit is contained in:
Łukasz Holeczek
2021-08-30 14:58:56 +02:00
parent 447c7d9d2f
commit e10880d89c
+174 -165
View File
@@ -1,294 +1,303 @@
import { h, resolveComponent } from "vue"; import { h, resolveComponent } from 'vue'
import { createRouter, createWebHistory } from "vue-router"; import { createRouter, createWebHistory } from 'vue-router'
// import Home from "../views/Home.vue";
import DefaultLayout from "@/layouts/DefaultLayout"; import DefaultLayout from '@/layouts/DefaultLayout'
const routes = [ const routes = [
{ {
path: "/", path: '/',
name: "Home", name: 'Home',
component: DefaultLayout, component: DefaultLayout,
redirect: "/dashboard", redirect: '/dashboard',
children: [ children: [
{ {
path: "/dashboard", path: '/dashboard',
name: "Dashboard", name: 'Dashboard',
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => component: () =>
import(/* webpackChunkName: "dashboard" */ "@/views/Dashboard.vue"), import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue'),
}, },
{ {
path: "/theme", path: '/theme',
name: "Theme", name: 'Theme',
redirect: "/theme/typography", redirect: '/theme/typography',
}, },
{ {
path: "/theme/colors", path: '/theme/colors',
name: "Colors", name: 'Colors',
component: () => import("@/views/theme/Colors.vue"), component: () => import('@/views/theme/Colors.vue'),
}, },
{ {
path: "/theme/typography", path: '/theme/typography',
name: "Typography", name: 'Typography',
component: () => import("@/views/theme/Typography.vue"), component: () => import('@/views/theme/Typography.vue'),
}, },
{ {
path: "/base", path: '/base',
name: "Base", name: 'Base',
component: { component: {
render() { render() {
return h(resolveComponent("router-view")); return h(resolveComponent('router-view'))
}, },
}, },
redirect: "/base/breadcrumbs", redirect: '/base/breadcrumbs',
children: [ children: [
{ {
path: "/base/accordion", path: '/base/accordion',
name: "Accordion", name: 'Accordion',
component: () => component: () => import('@/views/base/Accordion.vue'),
import(
/* webpackChunkName: "dashboard" */ "@/views/base/Accordion.vue"
),
}, },
{ {
path: "/base/breadcrumbs", path: '/base/breadcrumbs',
name: "Breadcrumbs", name: 'Breadcrumbs',
component: () => component: () => import('@/views/base/Breadcrumbs.vue'),
import(
/* webpackChunkName: "dashboard" */ "@/views/base/Breadcrumbs.vue"
),
}, },
{ {
path: "/base/cards", path: '/base/cards',
name: "Cards", name: 'Cards',
component: () => import("@/views/base/Cards.vue"), component: () => import('@/views/base/Cards.vue'),
}, },
{ {
path: "/base/carousels", path: '/base/carousels',
name: "Carousels", name: 'Carousels',
component: () => import("@/views/base/Carousels.vue"), component: () => import('@/views/base/Carousels.vue'),
}, },
{ {
path: "/base/collapses", path: '/base/collapses',
name: "Collapses", name: 'Collapses',
component: () => import("@/views/base/Collapses.vue"), component: () => import('@/views/base/Collapses.vue'),
},
/*
{
path: "/base/jumbotrons",
name: "Jumbotrons",
component: () => import("@/views/base/Jumbotrons.vue"),
},
*/
{
path: "/base/list-groups",
name: "List Groups",
component: () => import("@/views/base/ListGroups.vue"),
}, },
{ {
path: "/base/navs", path: '/base/list-groups',
name: "Navs", name: 'List Groups',
component: () => import("@/views/base/Navs.vue"), component: () => import('@/views/base/ListGroups.vue'),
}, },
{ {
path: "/base/navbars", path: '/base/navs',
name: "Navbars", name: 'Navs',
component: () => import("@/views/base/Navbars.vue"), component: () => import('@/views/base/Navs.vue'),
}, },
{ {
path: "/base/paginations", path: '/base/navbars',
name: "Paginations", name: 'Navbars',
component: () => import("@/views/base/Paginations.vue"), component: () => import('@/views/base/Navbars.vue'),
}, },
{ {
path: "/base/popovers", path: '/base/paginations',
name: "Popovers", name: 'Paginations',
component: () => import("@/views/base/Popovers.vue"), component: () => import('@/views/base/Paginations.vue'),
}, },
{ {
path: "/base/progress", path: '/base/popovers',
name: "Progress", name: 'Popovers',
component: () => import("@/views/base/Progress.vue"), component: () => import('@/views/base/Popovers.vue'),
}, },
{ {
path: "/base/spinners", path: '/base/progress',
name: "Spinners", name: 'Progress',
component: () => import("@/views/base/Spinners.vue"), component: () => import('@/views/base/Progress.vue'),
}, },
{ {
path: "/base/tables", path: '/base/spinners',
name: "Tables", name: 'Spinners',
component: () => import("@/views/base/Tables.vue"), component: () => import('@/views/base/Spinners.vue'),
}, },
{ {
path: "/base/tooltips", path: '/base/tables',
name: "Tooltips", name: 'Tables',
component: () => import("@/views/base/Tooltips.vue"), component: () => import('@/views/base/Tables.vue'),
},
{
path: '/base/tooltips',
name: 'Tooltips',
component: () => import('@/views/base/Tooltips.vue'),
}, },
], ],
}, },
{ {
path: "/buttons", path: '/buttons',
name: "Buttons", name: 'Buttons',
component: { component: {
render() { render() {
return h(resolveComponent("router-view")); return h(resolveComponent('router-view'))
}, },
}, },
redirect: "/buttons/standard-buttons", redirect: '/buttons/standard-buttons',
children: [ children: [
{ {
path: "/buttons/standard-buttons", path: '/buttons/standard-buttons',
name: "Buttons", name: 'Buttons',
component: () => import("@/views/buttons/Buttons.vue"), component: () => import('@/views/buttons/Buttons.vue'),
}, },
{ {
path: "/buttons/dropdowns", path: '/buttons/dropdowns',
name: "Dropdowns", name: 'Dropdowns',
component: () => import("@/views/buttons/Dropdowns.vue"), component: () => import('@/views/buttons/Dropdowns.vue'),
}, },
{ {
path: "/buttons/button-groups", path: '/buttons/button-groups',
name: "Button Groups", name: 'Button Groups',
component: () => import("@/views/buttons/ButtonGroups.vue"), component: () => import('@/views/buttons/ButtonGroups.vue'),
}, },
], ],
}, },
{ {
path: "/forms", path: '/forms',
name: "Forms", name: 'Forms',
component: { component: {
render() { render() {
return h(resolveComponent("router-view")); return h(resolveComponent('router-view'))
}, },
}, },
redirect: "/forms/form-control", redirect: '/forms/form-control',
children: [ children: [
{ {
path: "/forms/form-control", path: '/forms/form-control',
name: "Form Control", name: 'Form Control',
component: () => import("@/views/forms/FormControl.vue"), component: () => import('@/views/forms/FormControl.vue'),
}, },
{ {
path: "/forms/select", path: '/forms/select',
name: "Select", name: 'Select',
component: () => import("@/views/forms/Select.vue"), component: () => import('@/views/forms/Select.vue'),
}, },
{ {
path: "/forms/checks-radios", path: '/forms/checks-radios',
name: "Checks & Radios", name: 'Checks & Radios',
component: () => import("@/views/forms/ChecksRadios.vue"), component: () => import('@/views/forms/ChecksRadios.vue'),
}, },
{ {
path: "/forms/range", path: '/forms/range',
name: "Range", name: 'Range',
component: () => import("@/views/forms/Range.vue"), component: () => import('@/views/forms/Range.vue'),
}, },
{ {
path: "/forms/input-group", path: '/forms/input-group',
name: "Input Group", name: 'Input Group',
component: () => import("@/views/forms/InputGroup.vue"), component: () => import('@/views/forms/InputGroup.vue'),
}, },
{ {
path: "/forms/floating-labels", path: '/forms/floating-labels',
name: "Floating Labels", name: 'Floating Labels',
component: () => import("@/views/forms/FloatingLabels.vue"), component: () => import('@/views/forms/FloatingLabels.vue'),
}, },
{ {
path: "/forms/layout", path: '/forms/layout',
name: "Layout", name: 'Layout',
component: () => import("@/views/forms/Layout.vue"), component: () => import('@/views/forms/Layout.vue'),
}, },
{ {
path: "/forms/validation", path: '/forms/validation',
name: "Validation", name: 'Validation',
component: () => import("@/views/forms/Validation.vue"), component: () => import('@/views/forms/Validation.vue'),
}, },
], ],
}, },
{ {
path: "/charts", path: '/charts',
name: "Charts", name: 'Charts',
component: () => import("@/views/charts/Charts.vue"), component: () => import('@/views/charts/Charts.vue'),
}, },
{ {
path: "/icons", path: '/icons',
name: "Icons", name: 'Icons',
component: { component: {
render() { render() {
return h(resolveComponent("router-view")); return h(resolveComponent('router-view'))
}, },
}, },
redirect: "/icons/coreui-icons", redirect: '/icons/coreui-icons',
children: [ children: [
{ {
path: "/icons/coreui-icons", path: '/icons/coreui-icons',
name: "CoreUI Icons", name: 'CoreUI Icons',
component: () => import("@/views/icons/CoreUIIcons.vue"), component: () => import('@/views/icons/CoreUIIcons.vue'),
}, },
{ {
path: "/icons/brands", path: '/icons/brands',
name: "Brands", name: 'Brands',
component: () => import("@/views/icons/Brands.vue"), component: () => import('@/views/icons/Brands.vue'),
}, },
{ {
path: "/icons/flags", path: '/icons/flags',
name: "Flags", name: 'Flags',
component: () => import("@/views/icons/Flags.vue"), component: () => import('@/views/icons/Flags.vue'),
}, },
], ],
}, },
{ {
path: "/notifications", path: '/notifications',
name: "Notifications", name: 'Notifications',
component: { component: {
render() { render() {
return h(resolveComponent("router-view")); return h(resolveComponent('router-view'))
}, },
}, },
redirect: "/notifications/alerts", redirect: '/notifications/alerts',
children: [ children: [
{ {
path: "/notifications/alerts", path: '/notifications/alerts',
name: "Alerts", name: 'Alerts',
component: () => import("@/views/notifications/Alerts.vue"), component: () => import('@/views/notifications/Alerts.vue'),
}, },
{ {
path: "/notifications/badges", path: '/notifications/badges',
name: "Badges", name: 'Badges',
component: () => import("@/views/notifications/Badges.vue"), component: () => import('@/views/notifications/Badges.vue'),
}, },
{ {
path: "/notifications/modals", path: '/notifications/modals',
name: "Modals", name: 'Modals',
component: () => import("@/views/notifications/Modals.vue"), component: () => import('@/views/notifications/Modals.vue'),
}, },
], ],
}, },
{ {
path: "/widgets", path: '/widgets',
name: "Widgets", name: 'Widgets',
component: () => import("@/views/widgets/Widgets.vue"), component: () => import('@/views/widgets/Widgets.vue'),
}, },
], ],
}, },
// { {
// path: "/about", path: '/pages',
// name: "About", redirect: '/pages/404',
// // route level code-splitting name: 'Pages',
// // this generates a separate chunk (about.[hash].js) for this route component: {
// // which is lazy-loaded when the route is visited. render() {
// component: () => return h(resolveComponent('router-view'))
// import(/* webpackChunkName: "about" */ "../views/About.vue") },
// } },
]; children: [
{
path: '404',
name: 'Page404',
component: () => import('@/views/pages/Page404'),
},
{
path: '500',
name: 'Page500',
component: () => import('@/views/pages/Page500')
},
{
path: 'login',
name: 'Login',
component: () => import('@/views/pages/Login')
},
{
path: 'register',
name: 'Register',
component: () => import('@/views/pages/Register')
},
],
},
]
const router = createRouter({ const router = createRouter({
history: createWebHistory(process.env.BASE_URL), history: createWebHistory(process.env.BASE_URL),
routes, routes,
}); })
export default router; export default router