update initial router url when running inside iframe / object tags update initial router url when running inside iframe / object tags express express

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;    }});