Rediriger au démarrage par l'URL du navigateur donnée

9

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-viewle 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.replaceredirige 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 /twol'URL /. Je veux juste rendre la vue Twolorsque 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.

hrp8sfH4xQ4
la source
Vous voulez dire que vous voulez rendre le composant One lorsque vous écrivez - / my-embedded-app / one comme URL et le composant Two pour - / my-embedded-app / two? Si oui, avez-vous essayé - {path: 'two', component: Two,} Suppression de '/' de '/ two'
urvashi
Oui, exactement. J'ai essayé votre approche, mais je reçois un avertissement indiquant que cette route doit utiliser une barre oblique de début. Lors de l'exécution de l'application, cette route ne fonctionnait pas alors ..
hrp8sfH4xQ4
pouvez-vous changer l'ordre de votre itinéraire?
VariableVasasMT

Réponses:

1

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

mode:"hash"
Muhammad Elbadawy
la source
0

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.

VariableVasasMT
la source
Cela n'a rien changé. router.currentRoute.fullPathrenvoie toujours /au lieu d' /twoappelerlocalhost:3000/apps/my-embedded-app/two
hrp8sfH4xQ4
essayerrouter.onReady(() => { router.replace(router.currentRoute.fullPath); });
VariableVasasMT
désolé, cela n'a pas fonctionné. Lorsque j'utilise l'événement onReady, j'obtiens même cette erreurmessage: "Navigating to current location ("/subApps/app-one") is not allowed"
hrp8sfH4xQ4
@ hrp8sfH4xQ4 je vous suggère de faire un jsfiddle et d'expliquer exactement ce dont vous avez besoin et peut-être que les gens peuvent le changer pour vous, nous ne pouvons pas reproduire exactement le problème.
VariableVasasMT
désolé, je ne peux pas reproduire cela avec un violon. Un serveur de fichiers est requis pour le conteneur IFrame. Mais ceci est un référentiel à des fins de test github.com/byteCrunsher/router-startup
hrp8sfH4xQ4
0

Essayez beforeEnter. Jetez un œil au code ci-dessous:

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

En savoir plus sur les gardes de navigation ici

Rajeev Radhakrishnan
la source
désolé, pareil pour la réponse de tony19. Je ne veux pas rediriger l'utilisateur. Je souhaite afficher la Twovue si l'URL du navigateur l'est .../two. Actuellement, ce n'est pas le cas
hrp8sfH4xQ4
0

Pourriez-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

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
la source
Ce problème est lié à ceci ici stackoverflow.com/questions/58397766/… et j'ai créé un petit référentiel à des fins de test github.com/byteCrunsher/router-startup
hrp8sfH4xQ4