Sub routes inside the vue3 + vite micro frontend - vuejs2

Question

I am using vue3 + vite and a plugin
#originjs/vite-plugin-federation
to build a micro frontend. One app will be the host and one will be the remote, both will have their own routing. Is there a way to navigate remote app inside the host app.
If I export a single component from the remote app it is working, but if I export App.js with routing it is not working, can anybody provide general guidelines to this problem.
vite config of remote:
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import vueJsx from "#vitejs/plugin-vue-jsx";
import federation from "#originjs/vite-plugin-federation";
const dependencies = require("./package.json").dependencies;
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
federation({
name: "remote-app",
filename: "remoteEntry.js",
exposes: {
"./Test": "./src/App.vue",
},
shared: [{ ...dependencies }, "vue", "vue-router"],
}),
],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
vite.config of host:
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import vueJsx from "#vitejs/plugin-vue-jsx";
import federation from "#originjs/vite-plugin-federation";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
federation({
name: "host-app",
remotes: {
remote: "http://127.0.0.1:5173/dist/assets/remoteEntry.js",
},
shared: ["vue"],
}),
],
resolve: {
alias: {
"#": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});