Reindirizzamento all'avvio dall'URL del browser specificato


9

Ho creato una nuova app Vue con un percorso di base. A causa del fatto che l'app è incorporata in un'altra app Vue, questa app non esegue il rendering router-viewall'avvio. Se vuoi sapere di più su come o perché questa app è incorporata in un'altra app, dai un'occhiata qui:

montare le app Vue nel contenitore dell'app Vue principale

e la mia risposta a questo problema:

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

All'avvio della mia applicazione, esegue il rendering di tutto tranne il router-view. Voglio reindirizzare all'avvio dall'URL del browser indicato. Questa è la mia configurazione del router :

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;

Voglio che l'app renda il componente Due durante la chiamata .../my-embedded-app/two. Sfortunatamente, router.replacereindirizza sempre a /(quindi l'URL del browser è .../my-embedded-app/). Ho eseguito il debug di router, e ho visto che il percorso è /, ma mi sarei aspettato che fosse /two.

Nota importante: non voglio reindirizzare l'utente /twoogni volta che l'URL è /. Voglio solo rendere la vista Twoquando l'URL è /two. Attualmente no.

Cosa potrebbe esserci di sbagliato? Forse non ho nemmeno bisogno di quel reindirizzamento e posso risolvere il problema in un modo più elegante.


Vuoi dire, vuoi rendere il componente Uno quando scrivi - / my-embedded-app / one come URL e il componente due per - / my-embedded-app / two? Se sì, hai provato - {percorso: 'due', componente: Due,} Rimozione '/' da '/ due'
urvashi

Si, esattamente. Ho provato il tuo approccio ma poi ricevo un avviso che questo percorso deve utilizzare una barra. Durante l'esecuzione dell'applicazione questa route non ha funzionato quindi ...
hrp8sfH4xQ4

puoi cambiare l'ordine del tuo percorso?
VariableVasasMT

Risposte:


1

Questo è il comportamento normale, è il modo in cui funziona l'applicazione a pagina singola. Il segno "cancelletto" - come # - indica che i collegamenti non sposteranno l'applicazione in un'altra pagina.

così puoi cambiare la modalità del router in

mode:"hash"

0

aggiornato: jsfiddle

Ciò che è accaduto è route.currentRoute.fullPathstato eseguito prima che il router fosse pronto.


Ciò non ha cambiato nulla. router.currentRoute.fullPathritorna comunque /invece /twoquando si chiamalocalhost:3000/apps/my-embedded-app/two
hrp8sfH4xQ4 l'

tryrouter.onReady(() => { router.replace(router.currentRoute.fullPath); });
VariableVasasMT

mi dispiace che non ha funzionato. Quando uso l'evento onReady ottengo anche questo erroremessage: "Navigating to current location ("/subApps/app-one") is not allowed"
hrp8sfH4xQ4

@ hrp8sfH4xQ4 ti suggerisco di creare un jsfiddle e spiegare esattamente ciò di cui hai bisogno e possono essere persone che possono cambiarlo per te, non possiamo riprodurre esattamente il problema.
VariableVasasMT

mi dispiace non posso riprodurlo con un violino. È richiesto un file server per il contenitore IFrame. Ma questo è un repository a scopo di test github.com/byteCrunsher/router-startup
hrp8sfH4xQ4

0

Prova beforeEnter. Dai un'occhiata al codice qui sotto:

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

Maggiori informazioni sulle protezioni di navigazione qui


scusa, lo stesso per la risposta di tony19. Non voglio reindirizzare l'utente. Voglio rendere la Twovista se l'URL del browser è .../two. Attualmente no
hrp8sfH4xQ4

0

Potresti fornire un repository github o alcuni per testare l'effettivo?

Altrimenti la mia prima idea è quella di utilizzare percorsi di bambini con una vista "vuota" come base, qui un esempio di ciò che ho provato. (lavorando nel mio caso)

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>

Questo problema è correlato a questo qui stackoverflow.com/questions/58397766/… e ho creato un piccolo repository a scopo di test github.com/byteCrunsher/router-startup
hrp8sfH4xQ4
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.