Przekieruj przy uruchomieniu przez podany adres URL przeglądarki

Stworzyłem nową aplikację Vue ze ścieżką podstawową. Ponieważ aplikacja jest osadzona w innej aplikacji Vue, ta aplikacja nie wyświetla router-viewpo uruchomieniu. Jeśli chcesz dowiedzieć się więcej o tym, jak i dlaczego ta aplikacja jest osadzona w innej aplikacji, spójrz tutaj:

montuj aplikacje Vue w pojemniku głównej aplikacji Vue

i moja własna odpowiedź na ten problem:

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

Podczas uruchamiania mojej aplikacji renderuje wszystko oprócz router-view. Chcę przekierować przy uruchomieniu przez podany adres URL przeglądarki. To jest moja konfiguracja routera :

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;

Chcę, aby aplikacja wyświetlała komponent drugi podczas połączenia .../my-embedded-app/two. Niestety, router.replacezawsze przekierowuje do /(tak jest URL przeglądarki .../my-embedded-app/). Debugowałem routeri zobaczyłem, że ścieżka jest /, ale oczekiwałbym, że tak będzie /two.

Ważna uwaga: nie chcę przekierowywać użytkownika, /twoilekroć jest adres URL /. Chcę tylko renderować widok, Twogdy jest adres URL /two. Obecnie tak nie jest.

Co może być nie tak? Może nawet nie potrzebuję tego przekierowania i mogę rozwiązać problem w bardziej elegancki sposób.

Takie jest normalne zachowanie, tak działa aplikacja na jednej stronie. Znak „funta” - jak # - oznacza, że ​​linki nie przenoszą aplikacji na inną stronę.

więc możesz zmienić tryb routera na

mode:"hash"

zaktualizowano: jsfiddle

Skończyło się to, że route.currentRoute.fullPathzostało wykonane, zanim router był gotowy.

Spróbować beforeEnter. Spójrz na poniższy kod:

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

Przeczytaj więcej o osłonach nawigacyjnych tutaj

Czy możesz podać repozytorium github lub przetestować go w rzeczywistości?

W przeciwnym razie moim pierwszym pomysłem jest użycie jako ścieżki podstawowych tras dla dzieci z „pustym” widokiem, tutaj przykład tego, co próbowałem. (działa w moim przypadku)

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>