SSR-403 Fix issue where page doesn't load at top...

of next page when changing routes.
This commit is contained in:
Bryan Mauger 2023-04-14 08:54:07 -04:00
parent 32a5bbfdb7
commit 0f85033fdd

View file

@ -35,7 +35,7 @@ const routes = [
await runExperiments(to.query.issPage); await runExperiments(to.query.issPage);
} }
// Process ISS cookie. // Process ISS cookie.
updateOrCreateISSCookie(); updateOrCreateISSCookie();
@ -74,9 +74,13 @@ const routes = [
const router = createRouter({ const router = createRouter({
history: createWebHistory("/"), history: createWebHistory("/"),
routes, routes,
scrollBehavior(to, from, savedPosition) {
// always scroll to top
return { top: 0 }
},
}); });
router.afterEach((to, from) => { router.afterEach((to, from) => {
const store = useMainStore(); const store = useMainStore();
// Update lastPageVisited in the store // Update lastPageVisited in the store
@ -95,12 +99,12 @@ router.afterEach((to, from) => {
// Get route information by page name. // 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. // This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
async function GetRouteInfoFromPageName(pageName) { async function GetRouteInfoFromPageName(pageName) {
const response = await useMainStore().getRouteInfo(pageName); const response = await useMainStore().getRouteInfo(pageName);
const jsonFromResponse = JSON.parse(response.data.Result); const jsonFromResponse = JSON.parse(response.data.Result);
let routeData = []; let routeData = [];
// Add our route data and return our array. // Add our route data and return our array.
Object.keys(jsonFromResponse).forEach((key) => { Object.keys(jsonFromResponse).forEach((key) => {
routeData.push({ routeData.push({
@ -137,7 +141,7 @@ router.overrideNavigation = (
router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => { router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData); navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
} }
// Navigate to the next route, depending on the scenario. // Navigate to the next route, depending on the scenario.
@ -152,11 +156,11 @@ function navigate (scenario, currentRoute, optionalQuery = {}, optionalParams =
if (!matchingScenarioMap){ if (!matchingScenarioMap){
console.error("No matching scenario found. Please review the routing table."); console.error("No matching scenario found. Please review the routing table.");
return; return;
} }
if (matchingScenarioMap.destinationIssPageValue) { if (matchingScenarioMap.destinationIssPageValue) {
// Update page data to the store for next page if provided. Otherwise, keep existing page data or set to empty object // Update page data to the store for next page if provided. Otherwise, keep existing page data or set to empty object
const existingPageDataForPage = useMainStore().pageData(matchingScenarioMap.destinationIssPageValue); const existingPageDataForPage = useMainStore().pageData(matchingScenarioMap.destinationIssPageValue);
baseMixin.methods.savePageDataToStore( baseMixin.methods.savePageDataToStore(
@ -183,11 +187,11 @@ function navigate (scenario, currentRoute, optionalQuery = {}, optionalParams =
function navigateToUrl(url, optionalQuery = {}) { function navigateToUrl(url, optionalQuery = {}) {
// possibly show some loading screen in the future here. // possibly show some loading screen in the future here.
let externalUrl = new URL(url); let externalUrl = new URL(url);
for (const queryKey in optionalQuery) { for (const queryKey in optionalQuery) {
externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]); externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
} }
window.location.assign(externalUrl); window.location.assign(externalUrl);
}; };
@ -204,14 +208,14 @@ function getNavigationMap (scenario, currentRoute) {
); );
let maps = matchedQueryValue ? matchedQueryValue.map((m) => m.maps.filter((map) => map.scenario === scenario))[0] : undefined; let maps = matchedQueryValue ? matchedQueryValue.map((m) => m.maps.filter((map) => map.scenario === scenario))[0] : undefined;
return maps ? maps.filter(x => x.filter === true || x.filter === undefined)[0] : undefined; return maps ? maps.filter(x => x.filter === true || x.filter === undefined)[0] : undefined;
} }
catch (e) { catch (e) {
console.error(e); console.error(e);
return undefined; return undefined;
} }
}; };
function GoToStartOn404(next) { function GoToStartOn404(next) {
@ -260,4 +264,4 @@ async function runExperiments(nextPage) {
}); });
} }
export default router; export default router;