Update Initial Router Url When Running Inside Iframe / Object Tags

I'm currently rendering Vue apps inside object tags (iframe could work too) of a container/master Vue app. First I setup a fileserver serving that container or the requested sub-ap

Solution 1:

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