Redireccionar al inicio por la URL del navegador dada

Creé una nueva aplicación Vue con una ruta base. Debido al hecho de que la aplicación está incrustada en otra aplicación Vue, esta aplicación no representa el router-viewinicio. Si desea saber más acerca de cómo o por qué esta aplicación está integrada en otra aplicación, eche un vistazo aquí:

montar aplicaciones Vue en el contenedor de la aplicación Vue principal

y mi propia respuesta a este problema:

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

Al iniciar mi aplicación, muestra todo excepto el router-view. Quiero redirigir al inicio por la URL del navegador dada. Esta es la configuración de mi enrutador :

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;

Quiero que la aplicación represente el componente Dos cuando llame .../my-embedded-app/two. Desafortunadamente, router.replacesiempre redirige a /(por lo que la URL del navegador es .../my-embedded-app/) Depuré el router, y vi que el camino es /, pero esperaría que fuera /two.

Nota importante: no quiero redirigir al usuario a donde /twosea ​​que esté la URL /. Solo quiero representar la vista Twocuando la url es /two. Actualmente no lo hace.

¿Qué puede estar mal? Tal vez ni siquiera necesito esa redirección, y puedo resolver el problema de una manera más elegante.

Ese es el comportamiento normal, es la forma en que funciona la aplicación de una sola página. El signo "libra" - como # - significa que los enlaces no moverán la aplicación a otra página.

para que pueda cambiar el modo de enrutador a

mode:"hash"

actualizado: jsfiddle

Lo que terminó sucediendo es que route.currentRoute.fullPathse ejecutó antes de que el enrutador estuviera listo.

Tratar beforeEnter. Echa un vistazo al siguiente código:

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

Lea más sobre los guardias de navegación aquí

¿Podría proporcionar un repositorio github o algo para probar el real?

De lo contrario, mi primera idea es utilizar rutas secundarias con una vista "vacía" como base, aquí un ejemplo de lo que probé. (trabajando en mi caso)

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>