110 lines
3.3 KiB
JavaScript
110 lines
3.3 KiB
JavaScript
import { createWebHistory, createRouter } from "vue-router";
|
|
import { storeActions } from "@/constants/store-actions.js";
|
|
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
|
|
import ComponentTest from "@/layouts/component-test/component-test.vue";
|
|
import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
|
|
import NotFound from "@/layouts/not-found/not-found.vue";
|
|
import store from "@/store";
|
|
|
|
const routes = [
|
|
{
|
|
path: "/:pathMatch(.*)*",
|
|
component: NotFound,
|
|
name: "NotFound",
|
|
},
|
|
{
|
|
path: "/component-test", // This is a temporary route for testing.
|
|
name: "ComponentTest",
|
|
component: ComponentTest,
|
|
},
|
|
{
|
|
path: "/loader-demo", // This is a temporary route for testing.
|
|
name: "LoaderDemo",
|
|
component: LoaderDemo,
|
|
},
|
|
{
|
|
path: "/",
|
|
beforeEnter(to, from, next) {
|
|
// If we have no query string, or we don't have the FmgPage query string.
|
|
if (to.query.fmgPage === undefined) {
|
|
RetainStructureAndGoTo404(to, next);
|
|
} else {
|
|
// If we already have our route, go to it.
|
|
if (router.hasRoute(to.query.fmgPage)) {
|
|
return next({
|
|
name: to.query.fmgPage,
|
|
query: to.query,
|
|
});
|
|
}
|
|
|
|
// Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
|
|
GetRouteInfoFromPageName(to.query.fmgPage)
|
|
.then((routeData) => {
|
|
// Add our dynamic route.
|
|
router.addRoute({
|
|
path: routeData[0].path, // Always the same path, because we control it with query strings.
|
|
name: routeData[0].name,
|
|
component: routeData[0].component,
|
|
});
|
|
|
|
// Assign current query string parameters, as well as our fmgPage one.
|
|
next({
|
|
name: routeData[0].name,
|
|
query: Object.assign(to.query, { fmgPage: routeData[0].name }),
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
// If we can't find the route, go to the 404 page.
|
|
RetainStructureAndGoTo404(to, next);
|
|
|
|
console.log("error:");
|
|
console.log(error);
|
|
});
|
|
}
|
|
},
|
|
},
|
|
];
|
|
|
|
const router = createRouter({
|
|
history: createWebHistory("/fmg/"),
|
|
routes,
|
|
});
|
|
|
|
// Get route information by page name.
|
|
// This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
|
|
function GetRouteInfoFromPageName(pageName) {
|
|
return new Promise((resolve, reject) => {
|
|
store
|
|
.dispatch(storeActions.GET_ROUTE_INFO_ACTION, { pageName: pageName })
|
|
.then((response) => {
|
|
// Add our route data and return our array.
|
|
let jsonFromResponse = JSON.parse(response.data.Result);
|
|
let routeData = [];
|
|
|
|
Object.keys(jsonFromResponse).forEach((key) => {
|
|
routeData.push({
|
|
path: "/",
|
|
name: `${key}`,
|
|
component: lazyLoadComponent(jsonFromResponse[key].LayoutName),
|
|
});
|
|
});
|
|
|
|
resolve(routeData);
|
|
})
|
|
.catch((error) => {
|
|
reject(error);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Go to our 404 page but retain our structure when we go there (path, queryString, hash).
|
|
function RetainStructureAndGoTo404(to, next) {
|
|
next({
|
|
name: "NotFound",
|
|
params: { pathMatch: to.path.split("/").slice(1) },
|
|
query: to.query,
|
|
hash: to.hash,
|
|
});
|
|
}
|
|
|
|
export default router;
|