Umleitung beim Start über die angegebene Browser-URL

9

Ich habe eine neue Vue-App mit einem Basispfad erstellt. Aufgrund der Tatsache, dass die App in eine andere Vue-App eingebettet ist, wird diese App beim router-viewStart nicht gerendert. Wenn Sie mehr darüber erfahren möchten, wie oder warum diese App in eine andere App eingebettet ist, schauen Sie bitte hier:

Mounten Sie Vue-Apps in den Container der Haupt-Vue-App

und meine eigene Antwort auf dieses Problem:

https://stackoverflow.com/a/58265830/9945420

Beim Starten meiner Anwendung wird alles außer dem gerendert router-view. Ich möchte beim Start über die angegebene Browser-URL umleiten. Das ist mein Router config:

import Vue from 'vue';
import Router from 'vue-router';

import One from './views/One.vue';
import Two from './views/Two.vue';

Vue.use(Router);

const router = new Router({
    base: '/my-embedded-app/',
    mode: 'history',
    routes: [
        {
            path: '/',
            component: One,
        },
        {
            path: '/two',
            component: Two,
        },
    ],
});

router.replace(router.currentRoute.fullPath);

export default router;

Ich möchte, dass die App beim Aufruf die Komponente Zwei rendert .../my-embedded-app/two. Leitet leider router.replaceimmer weiter /(also lautet die Browser-URL .../my-embedded-app/). Ich debuggte das routerund sah, dass der Pfad ist /, aber ich würde es erwarten /two.

Wichtiger Hinweis: Ich möchte den Benutzer nicht weiterleiten, /twowenn die URL lautet /. Ich möchte nur die Ansicht rendern, Twowenn die URL ist /two. Derzeit nicht.

Was könnte falsch sein? Vielleicht brauche ich diese Weiterleitung nicht einmal und kann das Problem auf elegantere Weise lösen.

hrp8sfH4xQ4
quelle
Meinen Sie, Sie möchten Komponente Eins rendern, wenn Sie - / my-embedded-app / one als URL und Komponente Zwei für - / my-embedded-app / two schreiben? Wenn ja, haben Sie versucht - {Pfad: 'zwei', Komponente: Zwei,} '/' von '/ zwei'
entfernen
Ja genau. Ich habe Ihren Ansatz ausprobiert, aber dann erhalte ich eine Warnung, dass für diese Route ein führender Schrägstrich verwendet werden muss. Beim Ausführen der Anwendung hat diese Route damals nicht funktioniert.
hrp8sfH4xQ4
Können Sie die Reihenfolge Ihrer Route ändern?
VariableVasasMT

Antworten:

1

Das ist das normale Verhalten, so funktioniert die Anwendung auf einer Seite. Das "Pfund" -ähnliche # -Zeichen bedeutet, dass die Links die Anwendung nicht auf eine andere Seite verschieben.

So können Sie den Router-Modus auf ändern

mode:"hash"
Muhammad Elbadawy
quelle
0

aktualisiert: jsfiddle

Was passiert ist, ist, dass route.currentRoute.fullPathes ausgeführt wurde, bevor der Router bereit war.

VariableVasasMT
quelle
Das hat nichts geändert. router.currentRoute.fullPathkehrt immer noch zurück, /anstatt /twobeim Aufrufenlocalhost:3000/apps/my-embedded-app/two
hrp8sfH4xQ4
versuchenrouter.onReady(() => { router.replace(router.currentRoute.fullPath); });
VariableVasasMT
Entschuldigung, das hat nicht funktioniert. Wenn ich das Ereignis onReady verwende, erhalte ich sogar diesen Fehlermessage: "Navigating to current location ("/subApps/app-one") is not allowed"
hrp8sfH4xQ4
@ hrp8sfH4xQ4 Ich schlage vor, Sie machen eine jsfiddle und erklären genau, was Sie brauchen und möglicherweise können Leute es für Sie ändern, wir können das Problem nicht genau reproduzieren.
VariableVasasMT
Entschuldigung, ich kann das nicht mit einer Geige reproduzieren. Für den IFrame-Container ist ein Dateiserver erforderlich. Dies ist jedoch ein Repository zu Testzwecken. Github.com/byteCrunsher/router-startup
hrp8sfH4xQ4
0

Versuchen Sie es beforeEnter. Schauen Sie sich den folgenden Code an:

const router = new Router({
  base: "/my-embedded-app/",
  mode: "history",
  routes: [
    {
      path: "/",
      component: One,
      beforeEnter: (to, from, next) => {
        // Your are free to add whatever logic here.
        // On first visit
        next("/two");
      }
    },
    {
      path: "/two",
      component: Two
    }
  ]
});

Lesen Sie mehr über Navigation bewacht hier

Rajeev Radhakrishnan
quelle
Entschuldigung, das Gleiche gilt für die Antwort von Tony19. Ich möchte den Benutzer nicht umleiten. Ich möchte die TwoAnsicht rendern , wenn die Browser-URL ist .../two. Derzeit nicht
hrp8sfH4xQ4
0

Könnten Sie ein Github-Repo oder etwas anderes bereitstellen, um das tatsächliche zu testen?

Ansonsten ist meine erste Idee, untergeordnete Routen mit einer "leeren" Ansicht als Basis zu verwenden, hier ein Beispiel für das, was ich versucht habe. (arbeitet in meinem Fall)

router.js

export default new Router({
    mode: 'history',
    base: '/my-embedded-app/',
    routes: [
      {
        path: '/',
        name: 'base',
        component: Base,
        children: [
          {
            path: '',
            name: 'one',
            component: One
          },
          {
            path: 'two',
            name: 'two',
            component: Two
          }
        ]
      }
    ]
})

Base.vue

<template>
    <router-view/>
</template>

One.vue

<template>
  <div>One</div>
</template>

Two.vue

<template>
  <div>Two</div>
</template>
Victor-Gabou
quelle
Dieses Problem hängt damit zusammen, dass stackoverflow.com/questions/58397766/… und ich ein kleines Repository zu Testzwecken erstellt habe. Github.com/byteCrunsher/router-startup
hrp8sfH4xQ4