Umleitung beim Start über die angegebene Browser-URL

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.

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"

aktualisiert: jsfiddle

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

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

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>