J'ai créé une nouvelle application Vue avec un chemin de base. En raison du fait que l'application est intégrée dans une autre application Vue, cette application ne rend pas router-view
le démarrage. Si vous voulez en savoir plus sur comment ou pourquoi cette application est intégrée dans une autre application, jetez un œil ici:
monter les applications Vue dans le conteneur de l'application Vue principale
et ma propre réponse à ce problème:
https://stackoverflow.com/a/58265830/9945420
Lors du démarrage de mon application, il restitue tout sauf le router-view
. Je veux rediriger au démarrage par l'URL du navigateur donnée. Voici ma configuration de routeur :
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;
Je souhaite que l'application affiche le composant Two lors de l'appel .../my-embedded-app/two
. Malheureusement, router.replace
redirige toujours vers /
(l'URL du navigateur l'est donc .../my-embedded-app/
). J'ai débogué le router
, et j'ai vu que le chemin est /
, mais je m'attendrais à ce qu'il soit /two
.
Remarque importante:
je ne souhaite pas rediriger l'utilisateur vers /two
l'URL /
. Je veux juste rendre la vue Two
lorsque l'URL est /two
. Actuellement, ce n'est pas le cas.
Qu'est-ce qui ne va pas? Peut-être que je n'ai même pas besoin de cette redirection et que je peux résoudre le problème de manière plus élégante.
la source
Réponses:
C'est le comportement normal, c'est la façon dont l'application d'une seule page fonctionne. Le signe "dièse" - comme # - signifie que les liens ne déplaceront pas l'application vers une autre page.
vous pouvez donc changer le mode du routeur en
la source
mise à jour: jsfiddle
Ce qui s'est passé, c'est qu'il a
route.currentRoute.fullPath
été exécuté avant que le routeur ne soit prêt.la source
router.currentRoute.fullPath
renvoie toujours/
au lieu d'/two
appelerlocalhost:3000/apps/my-embedded-app/two
router.onReady(() => { router.replace(router.currentRoute.fullPath); });
message: "Navigating to current location ("/subApps/app-one") is not allowed"
Essayez
beforeEnter
. Jetez un œil au code ci-dessous:En savoir plus sur les gardes de navigation ici
la source
Two
vue si l'URL du navigateur l'est.../two
. Actuellement, ce n'est pas le casPourriez-vous fournir un dépôt github ou certains pour tester le réel?
Sinon ma première idée est d'utiliser des routes enfants avec une vue "vide" comme base, voici un exemple de ce que j'ai essayé. (travaillant dans mon cas)
router.js
Base.vue
One.vue
Two.vue
la source