Przekieruj przy uruchomieniu przez podany adres URL przeglądarki

9

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.

hrp8sfH4xQ4
źródło
Czy masz na myśli, że chcesz renderować komponent One, gdy piszesz - / my-embedded-app / one jako adres URL, a komponent Two for - / my-embedded-app / two? Jeśli tak, czy próbowałeś - {ścieżka: „dwa”, składnik: Dwa,} Usuwanie „/” z „/ two”
urvashi,
Tak, dokładnie. Wypróbowałem twoje podejście, ale potem pojawia się ostrzeżenie, że na tej trasie trzeba użyć ukośnika. Po uruchomieniu aplikacji ta trasa nie działała wtedy ...
hrp8sfH4xQ4
czy możesz zmienić kolejność trasy?
VariableVasasMT

Odpowiedzi:

1

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"
Muhammad Elbadawy
źródło
0

zaktualizowano: jsfiddle

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

VariableVasasMT
źródło
To nic nie zmieniło. router.currentRoute.fullPathwciąż powraca /zamiast /twopodczas dzwonienialocalhost:3000/apps/my-embedded-app/two
hrp8sfH4xQ4
tryrouter.onReady(() => { router.replace(router.currentRoute.fullPath); });
VariableVasasMT
przepraszam, że nie działało. Gdy korzystam ze zdarzenia onReady, pojawia się nawet ten błądmessage: "Navigating to current location ("/subApps/app-one") is not allowed"
hrp8sfH4xQ4
@ hrp8sfH4xQ4. Sugeruję, aby zrobić jsfiddle i wyjaśnić dokładnie, czego potrzebujesz, a być może ludzie mogą to zmienić, nie możemy dokładnie odtworzyć problemu.
VariableVasasMT
przepraszam, nie mogę tego odtworzyć ze skrzypcami. Serwer plików jest wymagany dla kontenera IFrame. Ale to repozytorium do celów testowych github.com/byteCrunsher/router-startup
hrp8sfH4xQ4
0

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

Rajeev Radhakrishnan
źródło
przepraszam, to samo dla odpowiedzi tony19. Nie chcę przekierowywać użytkownika. Chcę renderować Twowidok, jeśli adres URL przeglądarki to .../two. Obecnie tak nie jest
hrp8sfH4xQ4
0

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>
victor-gabou
źródło
Ten problem jest związany z tym tutaj stackoverflow.com/questions/58397766/... i utworzyłem małe repozytorium do celów testowych github.com/byteCrunsher/router-startup
hrp8sfH4xQ4