Routing between two instances of a Vue.js app in a broader application with Java Backend: How can I-CodePudding

I am new to Vue.js and working, In the context of a broader Software application with Vue.js in the Frontend and Java in the Backend.

The user needs to be redirected between the first running Instance and the second running Instance of the same Vue.js app, in order to apply for an Insurance contract.

Routing in Index.js:

Vue.use(VueRouter);

const routes = [
 { path: "/", redirect: "/offer" },
 {
 path: "/offer",
 component: SomeOffer,
 children: [
 { path: "/", redirect: "generalInformation" },
 {
 path: "generalInformation",
 name: "generalInformation",
 component: GeneralInformation
 },
 {
 path: "questions",
 name: "Questions",
 component: Questions
 },
 {
 path: "insuredPerson",
 name: "Insured Person",
 component: InsuredPerson
 },
 {
 path: "ourOffer",
 name: "Our Offer",
 component: OurOffer
 },
 {
 path: "offermap",
 name: "offermap",
 component: OfferMapWrapper
 }
 ]
 },
 {
 path: "/registration",
 component: Registration,
 children: [
 { path: "/", redirect: "requester" },
 {
 path: "requester",
 name: "requester",
 component: Requester
 },
 {
 path: "payment-provider",
 name: "PaymentProvider",
 component: PaymentProvider
 },
 {
 path: "partnerdataInsuredPerson",
 name: "Partner data Insured Person",
 component: Partner data InsuredPerson
 },
 {
 path: "healthquestions1",
 name: "HealthQuestions 1",
 component: HealthQuestions1
 },
 {
 path: "healthquestions2",
 name: "HealthQuestions2",
 component: HealthQuestions2
 },
 {
 path: "healthquestions3",
 name: "HealthQuestions 3",
 component: HealthQuestions3
 },
 {
 path: "somepath",
 name: "some path",
 component: SomePath
 },
 {
 path: "allowedPerson",
 name: "allowded Person",
 component: AllowdedPerson
 },
 {
 path: "registeredperson",
 name: "Registered Person",
 component: RegisteredPerson
 },
 {
 path: "initialdata",
 name: "Initialdata",
 component: InitialData
 },
 {
 path: "protocoll",
 name: "Protocoll",
 component: Protocoll
 },
 {
 path: "map",
 name: "Map",
 component: MapWrapper
 },
 {
 path: "prints",
 name: "Prints",
 component: Prints
 }
 ]
 },
 {
 path: "/errors",
 name: "Errors",
 component: Errors
 }
];

const router = new VueRouter({
 base: process.env.ROUTER_BASE,
 routes,
 scrollBehavior() {
 // https://router.vuejs.org/guide/advanced/scroll-behavior.html
 return { x: 0, y: 0 };
 }
});

router.afterEach(to => {
 window.postMessage(
 "merkeAktuelleSeite:"   JSON.stringify({ aktuelleSeite: to.path }),
 window.location.origin
 );
});

export default router;

Notice the variable called warenkorbId in the URL-

The initial URLs:

http://xxx/yyy/zzz/plattformfrontend/insuranceapp?warenkorbId=b5a0b8e1-ad21-4c37-9a7e-84323c77fb29&produktId=33f4c5f0-36de-4b3a-be82-f6730582cdac&angebotId=ea3215b7-8872-4435-9950-5acfdd395b0c/#/registration/healthquestions1

etc.

When navigating to the other running Vue.js app instance, the URL looks like this:

but it should look like this:

So, basically, it should again navigate back to

/registration/requester (right)

but it navigates back again to

/registration/healthquestions2 (wrong)

How can I achieve that? Any hints or help would be very much appreciated, thanks!

CodePudding user response：

Routing is not proper define for path you should alway add / before url or for redirect you need to understand if you want to redirect directly to component so this is code if directly to any url so different.

for directly component

[{ path: '/home', redirect: { name: 'homepage' } }]

for directly to url

[{ path: '/home', redirect: '/' }]

here is documentation.

https://router.vuejs.org/guide/essentials/redirect-and-alias.html#redirect