在具有 Java 后端的更广泛应用程序中的 Vue.js 应用程序的两个实例之间进行路由：如何从第一个应用程序重定向到特定部分？

Question

我是 Vue.js 的新手，正在更广泛的软件应用程序环境中工作，前端 Vue.js 后端 Java。

用户需要在同一个 Vue.js 应用程序的第一个运行实例和第二个运行实例之间重定向，以便申请保险合同。

路由 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;

注意 URL-

中名为 warenkorbId 的变量

初始URL秒：

http:///xxx/yyy/zzz/plattformfrontend/insuranceapp?warenkorbId=b5a0b8e1-ad21-4c37-9a7e-84323c77fb29&produktId=33f4c5f0-36de-4b3a-be82-f6730582cdac&angebotId=ea3215b7-8872-443c#5b45-995 =]

等

导航到另一个运行 Vue.js 应用程序实例时，URL 看起来像这样：

http:///xxx/yyy/zzz/plattformfrontend/insuranceapp?warenkorbId=b5a0b8e1-ad21-4c37-9a7e-84323c77fb29&produktId=33f4c5f0-36de-4b3a-be82-f6730582cdac&angebotId=ea3215b7-8872-443c#5b45-995 =]

但它应该是这样的：

http:///xxx/yyy/zzz/plattformfrontend/insuranceapp?warenkorbId=b5a0b8e1-ad21-4c37-9a7e-84323c77fb29&produktId=33f4c5f0-36de-4b3a-be82-f6730582cdac&angebotId=ea3215b7-8872-443c#5b25-995 =]

所以，基本上，它应该再次导航回

/registration/requester (right)

但它又导航回

/registration/healthquestions2 (wrong)

我怎样才能做到这一点？非常感谢任何提示或帮助，谢谢！

Answer 1

路由定义不正确对于路径，您应该始终在 url 之前添加 / 或者对于重定向，您需要了解是否要直接重定向到组件，所以如果直接重定向到任何 url 如此不同，这是代码。

直接组件

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

直接到url

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

这是文档。

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

在具有 Java 后端的更广泛应用程序中的 Vue.js 应用程序的两个实例之间进行路由：如何从第一个应用程序重定向到特定部分？

Routing between two instances of a Vue.js app in a broader application with Java Backend: How can I redirect to a specific part from of the first app?

javascript

vue.js

routes

vue-component

vue-router