Stworzyłem nową aplikację Vue ze ścieżką podstawową. Ponieważ aplikacja jest osadzona w innej aplikacji Vue, ta aplikacja nie wyświetla router-view
po 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.replace
zawsze przekierowuje do /
(tak jest URL przeglądarki .../my-embedded-app/
). Debugowałem router
i zobaczyłem, że ścieżka jest /
, ale oczekiwałbym, że tak będzie /two
.
Ważna uwaga:
nie chcę przekierowywać użytkownika, /two
ilekroć jest adres URL /
. Chcę tylko renderować widok, Two
gdy 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.
źródło
Odpowiedzi:
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
źródło
zaktualizowano: jsfiddle
Skończyło się to, że
route.currentRoute.fullPath
zostało wykonane, zanim router był gotowy.źródło
router.currentRoute.fullPath
wciąż powraca/
zamiast/two
podczas dzwonienialocalhost:3000/apps/my-embedded-app/two
router.onReady(() => { router.replace(router.currentRoute.fullPath); });
message: "Navigating to current location ("/subApps/app-one") is not allowed"
Spróbować
beforeEnter
. Spójrz na poniższy kod:Przeczytaj więcej o osłonach nawigacyjnych tutaj
źródło
Two
widok, jeśli adres URL przeglądarki to.../two
. Obecnie tak nie jestCzy 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
Base.vue
One.vue
Two.vue
źródło