update initial router url when running inside iframe / object tags
It may be a bit hacky solution but it works for me. Just check that current url path is not equal to to.path
in case if event is triggered twice
router.afterEach((to, from) => { console.log({ urlToAppend: to.path }); if (router.currentRoute.path !== to.path) { localStorage.subAppRouteUpdate = to.path; }});
UPDATE
In base/src/App.vue
in storage event listener before concatenating sub route to base route you don't check for the possible duplicates. This fix should help
window.addEventListener("storage", () => { const fullRoute = this.$router.currentRoute.fullPath; const routeSegments = fullRoute.split("/"); const appsIndex = routeSegments.indexOf("apps"); const newBaseUrlSegments = routeSegments.slice(0, appsIndex + 2); const newBaseUrl = newBaseUrlSegments.join("/"); const subAppRoute = localStorage.subAppRouteUpdate; if (subAppRoute.startsWith(newBaseUrl)) { history.replaceState(null, null, newBaseUrl); } else { const updatedUrl = newBaseUrl.concat(subAppRoute); history.replaceState(null, null, updatedUrl); } });
And router.afterEach
should look like this to navigate to subRoutes which are defined within app-one router:
router.afterEach((to, from) => { const newPath = '/' + to.path.split('/').pop(); const matchingRoutes = router.options.routes.filter(r => r.path === newPath); const isPathInRoutes = matchingRoutes.length > 0; if (router.currentRoute.path !== newPath && isPathInRoutes) { router.push(newPath); localStorage.subAppRouteUpdate = newPath; } else { localStorage.subAppRouteUpdate = to.path; }});
If you want page one to be rendered by default when user goes to http://localhost:3000/apps/app-one
you could check whether last part of the entered url is equal to sub apps base route(/app-one
) and if it does navigate to default page route(/
):
router.afterEach((to, from) => { let newPath = '/' + to.path.split('/').pop(); const matchingRoutes = router.options.routes.filter(r => r.path === newPath); const isPathInRoutes = matchingRoutes.length > 0; if (newPath === router.history.base || !isPathInRoutes) { newPath = '/'; } if (router.currentRoute.path !== newPath) { router.push(newPath); localStorage.subAppRouteUpdate = newPath; } else { localStorage.subAppRouteUpdate = to.path; }});