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-view
Start 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.replace
immer weiter /
(also lautet die Browser-URL .../my-embedded-app/
). Ich debuggte das router
und sah, dass der Pfad ist /
, aber ich würde es erwarten /two
.
Wichtiger Hinweis:
Ich möchte den Benutzer nicht weiterleiten, /two
wenn die URL lautet /
. Ich möchte nur die Ansicht rendern, Two
wenn 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.
quelle
Antworten:
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
quelle
aktualisiert: jsfiddle
Was passiert ist, ist, dass
route.currentRoute.fullPath
es ausgeführt wurde, bevor der Router bereit war.quelle
router.currentRoute.fullPath
kehrt immer noch zurück,/
anstatt/two
beim Aufrufenlocalhost:3000/apps/my-embedded-app/two
router.onReady(() => { router.replace(router.currentRoute.fullPath); });
message: "Navigating to current location ("/subApps/app-one") is not allowed"
Versuchen Sie es
beforeEnter
. Schauen Sie sich den folgenden Code an:Lesen Sie mehr über Navigation bewacht hier
quelle
Two
Ansicht rendern , wenn die Browser-URL ist.../two
. Derzeit nichtKö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
Base.vue
One.vue
Two.vue
quelle