Redirecionar na inicialização pelo URL do navegador fornecido

Criei um novo aplicativo Vue com um caminho base. Devido ao fato de o aplicativo estar incorporado a outro aplicativo Vue, esse aplicativo não renderiza a router-viewinicialização. Se você quiser saber mais sobre como ou por que esse aplicativo está incorporado a outro aplicativo, dê uma olhada aqui:

montar aplicativos Vue no contêiner do aplicativo principal Vue

e minha própria resposta para esse problema:

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

Ao iniciar meu aplicativo, ele processa tudo, exceto o router-view. Quero redirecionar na inicialização pelo URL do navegador fornecido. Esta é a minha configuração de roteador :

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;

Quero que o aplicativo renderize o componente Dois ao chamar .../my-embedded-app/two. Infelizmente, router.replacesempre redireciona para /(portanto, o URL do navegador é .../my-embedded-app/). Eu depurei o routere vi que o caminho é /, mas eu esperava que fosse /two.

Nota importante: não quero redirecionar o usuário para /twosempre que o URL estiver /. Eu só quero renderizar a exibição Twoquando o URL estiver /two. Atualmente não.

O que pode estar errado? Talvez eu nem precise desse redirecionamento e consiga resolver o problema de uma maneira mais elegante.

Esse é o comportamento normal, é o modo como o aplicativo de página única funciona. O sinal de "libra" - como # - significa que os links não moverão o aplicativo para outra página.

para que você possa alterar o modo do roteador para

mode:"hash"

atualizado: jsfiddle

O que aconteceu foi que route.currentRoute.fullPathfoi executado antes do roteador estar pronto.

Tente beforeEnter. Dê uma olhada no código abaixo:

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

Leia mais sobre os protetores de navegação aqui

Você poderia fornecer um repositório no github ou alguns para testar o real?

Caso contrário, minha primeira idéia é usar rotas filho com uma visão "vazia" como base, aqui um exemplo sobre o que eu tentei. (trabalhando no meu 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>