Reindirizzamento all'avvio dall'URL del browser specificato

Ho creato una nuova app Vue con un percorso di base. A causa del fatto che l'app è incorporata in un'altra app Vue, questa app non esegue il rendering router-viewall'avvio. Se vuoi sapere di più su come o perché questa app è incorporata in un'altra app, dai un'occhiata qui:

montare le app Vue nel contenitore dell'app Vue principale

e la mia risposta a questo problema:

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

All'avvio della mia applicazione, esegue il rendering di tutto tranne il router-view. Voglio reindirizzare all'avvio dall'URL del browser indicato. Questa è la mia configurazione del router :

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;

Voglio che l'app renda il componente Due durante la chiamata .../my-embedded-app/two. Sfortunatamente, router.replacereindirizza sempre a /(quindi l'URL del browser è .../my-embedded-app/). Ho eseguito il debug di router, e ho visto che il percorso è /, ma mi sarei aspettato che fosse /two.

Nota importante: non voglio reindirizzare l'utente /twoogni volta che l'URL è /. Voglio solo rendere la vista Twoquando l'URL è /two. Attualmente no.

Cosa potrebbe esserci di sbagliato? Forse non ho nemmeno bisogno di quel reindirizzamento e posso risolvere il problema in un modo più elegante.

Questo è il comportamento normale, è il modo in cui funziona l'applicazione a pagina singola. Il segno "cancelletto" - come # - indica che i collegamenti non sposteranno l'applicazione in un'altra pagina.

così puoi cambiare la modalità del router in

mode:"hash"

aggiornato: jsfiddle

Ciò che è accaduto è route.currentRoute.fullPathstato eseguito prima che il router fosse pronto.

Prova beforeEnter. Dai un'occhiata al codice qui sotto:

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

Maggiori informazioni sulle protezioni di navigazione qui

Potresti fornire un repository github o alcuni per testare l'effettivo?

Altrimenti la mia prima idea è quella di utilizzare percorsi di bambini con una vista "vuota" come base, qui un esempio di ciò che ho provato. (lavorando nel mio 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>