Rediriger au démarrage par l'URL du navigateur donnée

J'ai créé une nouvelle application Vue avec un chemin de base. En raison du fait que l'application est intégrée dans une autre application Vue, cette application ne rend pas router-viewle démarrage. Si vous voulez en savoir plus sur comment ou pourquoi cette application est intégrée dans une autre application, jetez un œil ici:

monter les applications Vue dans le conteneur de l'application Vue principale

et ma propre réponse à ce problème:

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

Lors du démarrage de mon application, il restitue tout sauf le router-view. Je veux rediriger au démarrage par l'URL du navigateur donnée. Voici ma configuration de routeur :

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;

Je souhaite que l'application affiche le composant Two lors de l'appel .../my-embedded-app/two. Malheureusement, router.replaceredirige toujours vers /(l'URL du navigateur l'est donc .../my-embedded-app/). J'ai débogué le router, et j'ai vu que le chemin est /, mais je m'attendrais à ce qu'il soit /two.

Remarque importante: je ne souhaite pas rediriger l'utilisateur vers /twol'URL /. Je veux juste rendre la vue Twolorsque l'URL est /two. Actuellement, ce n'est pas le cas.

Qu'est-ce qui ne va pas? Peut-être que je n'ai même pas besoin de cette redirection et que je peux résoudre le problème de manière plus élégante.

C'est le comportement normal, c'est la façon dont l'application d'une seule page fonctionne. Le signe "dièse" - comme # - signifie que les liens ne déplaceront pas l'application vers une autre page.

vous pouvez donc changer le mode du routeur en

mode:"hash"

mise à jour: jsfiddle

Ce qui s'est passé, c'est qu'il a route.currentRoute.fullPathété exécuté avant que le routeur ne soit prêt.

Essayez beforeEnter. Jetez un œil au code ci-dessous:

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
    }
  ]
});

En savoir plus sur les gardes de navigation ici

Pourriez-vous fournir un dépôt github ou certains pour tester le réel?

Sinon ma première idée est d'utiliser des routes enfants avec une vue "vide" comme base, voici un exemple de ce que j'ai essayé. (travaillant dans mon cas)

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>