Wie kann man auf den Vue-Router pushen, ohne den Verlauf zu erweitern?

Ich habe die folgende Sequenz passiert:

• Hauptbildschirm

• Ladebildschirm

• Ergebnisbildschirm

Wenn jemand auf der Homepage auf eine Schaltfläche klickt, sende ich ihn an den Ladebildschirm über:

this.$router.push({path: "/loading"});

Und sobald ihre Aufgabe erledigt ist, werden sie über an den Ergebnisbildschirm gesendet

this.$router.push({path: "/results/xxxx"});

Das Problem ist, dass sie normalerweise von den Ergebnissen zurück zum Hauptbildschirm wechseln möchten. Wenn sie jedoch zurückklicken, werden sie erneut zum Laden gesendet, wodurch sie zu den Ergebnissen zurückkehren, sodass sie in einer Endlosschleife stecken bleiben und nicht mehr gehen können zurück zum Hauptbildschirm.

Irgendwelche Ideen, wie man das behebt? Ich würde im Idealfall gerne eine Option wie:

this.$router.push({path: "/loading", addToHistory: false});

das würde sie zur Route schicken, ohne sie der Geschichte hinzuzufügen.

Es gibt eine perfekte Möglichkeit, mit dieser Situation umzugehen

Sie können den komponenteninternen Schutz verwenden , um die Route in Granulat-Ebene zu steuern

Nehmen Sie die folgenden Änderungen in Ihrem Code vor

In der Hauptbildschirmkomponente

Fügen Sie diesen beofreRouteLeave-Schutz in den Komponentenoptionen hinzu, bevor Sie zum Ergebnisbildschirm wechseln, legen Sie die Route so fest, dass nur der Ladebildschirm durchlaufen wird

beforeRouteLeave(to, from, next) {
   if (to.path == "/result") {
      next('/loading')
    }
    next();
  }, 

Beim Laden der Bildschirmkomponente

Wenn die Route vom Ergebnis zum Laden zurückgeht, sollte sie nicht hier landen und direkt zum Hauptbildschirm springen

beforeRouteEnter(to, from, next) {
    if (from.path == "/result") {
      next('/main')
    }
     next();
  },

Im Ladebildschirm hat der beforeRouteEnter-Guard KEINEN Zugriff darauf, da der Guard vor Bestätigung der Navigation aufgerufen wird und die neu eingegebene Komponente noch nicht einmal erstellt wurde. Wenn Sie dies ausnutzen, werden beim Weiterleiten vom Ergebnisbildschirm nicht die unendlichen Anrufe ausgelöst

In Ergebnisbildschirmkomponente

Wenn Sie go back verwenden, sollte es nicht beim Laden landen und direkt zum Hauptbildschirm springen

beforeRouteLeave(to, from, next) {
    if (to.path == "/loading") {
      next('/')
    }
    next();
  },

Ich habe gerade eine kleine Vue-Anwendung erstellt, um das gleiche Problem zu reproduzieren. Es funktioniert in meinem lokalen gemäß Ihrer Frage. Hoffe, es löst auch Ihr Problem .

Ich denke, es router.replaceist der richtige Weg - aber immer noch einige Gedankengänge (ungetestet):

Grundsätzlich wird $routerbeim Laden die Ladekomponente gerendert, bis sie ausgegeben wird load:stop, und dann wird die Ladekomponente gerendertrouter-view

import { Vue, Component, Watch, Prop } from "vue-property-decorator";

@Component<RouteLoader>({
    render(h){
        const rv = (this.$slots.default || [])
        .find(
            child => child.componentOptions
            //@ts-ignore 
            && child.componentOptions.Ctor.extendedOptions.name === "RouterView"
        )
        if(rv === undefined) 
            throw new Error("RouterView is missing - add <router-view> to default slot")

        const loader = (this.$slots.default || [])
        .find(
            child => child.componentOptions
            //@ts-ignore 
            && child.componentOptions.Ctor.extendedOptions.name === this.loader
        )
        if(loader === undefined) 
            throw new Error("LoaderView is missing - add <loader-view> to default slot")
        const _vm = this 
        const loaderNode = loader.componentOptions && h(
            loader.componentOptions.Ctor,
            {
                on: {
                    // "load:start": () => this.loading = true,
                    "load:stop": () => _vm.loading = false
                },
                props: loader.componentOptions.propsData,
                //@ts-ignore
                attrs: loader.data.attrs
            }
        )
        return this.loading && loaderNode || rv
    }
})
export default class RouteLoader extends Vue {
    loading: boolean = false
    @Prop({default: "LoaderView"}) readonly loader!: string
    @Watch("$route")
    loads(nRoute: string, oRoute: string){
        this.loading = true
    }
}

@Component<Loader>({
    name: "LoaderView",
    async mounted(){

        await console.log("async call")
        this.$emit("load:stop")
        // this.$destroy()
    }
})
export class Loader extends Vue {}

Dies ist eine schwierige Aufgabe, wenn man bedenkt, wie wenig wir über die Vorgänge auf Ihrer Laderoute wissen.

Aber...

Ich musste noch nie eine Laderoute erstellen, sondern nur Komponenten laden, die während der Init- / Datenerfassungsphase auf mehreren Routen gerendert werden.

Ein Argument für das Fehlen einer Laderoute wäre, dass ein Benutzer möglicherweise (versehentlich) direkt zu dieser URL navigieren könnte und dann nicht genügend Kontext vorhanden wäre, um zu wissen, wohin der Benutzer gesendet werden soll oder welche Maßnahmen er ergreifen soll. Dies könnte jedoch bedeuten, dass es an dieser Stelle zu einer Fehlerroute kommt. Insgesamt keine tolle Erfahrung.

Ein weiterer Grund ist, dass die Navigation zwischen Routen viel einfacher wird und sich wie erwartet / gewünscht verhält, wenn Sie Ihre Routen vereinfachen $router.replace.

Ich verstehe, dass dies die Frage nicht so löst, wie Sie es stellen. Aber ich würde vorschlagen, diese Laderoute zu überdenken.

App

<shell>
    <router-view></router-view>
</shell>

const routes = [
  { path: '/', component: Main },
  { path: '/results', component: Results }
]

const router = new VueRouter({
  routes,
})

const app = new Vue({
  router
}).$mount('#app')

Schale

<div>
    <header>
        <nav>...</nav>
    </header>
    <main>
        <slot></slot>
    </main>
</div>

Hauptseite

<section>
    <form>...</form>
</section>

{
    methods: {
        onSubmit() {
            // ...

            this.$router.push('/results')
        }
    }
}

Ergebnisseite

<section>
    <error v-if="error" :error="error" />
    <results v-if="!error" :loading="loading" :results="results" />
    <loading v-if="loading" :percentage="loadingPercentage" />
</section>

{
    components: {
        error: Error,
        results: Results,
    },
    data() {
        return {
            loading: false,
            error: null,
            results: null,
        }
    },
    created () {
        this.fetchData()
    },
    watch: {
        '$route': 'fetchData'
    },
    methods: {
        fetchData () {
            this.error = this.results = null
            this.loading = true

            getResults((err, results) => {
                this.loading = false

                if (err) {
                    this.error = err.toString()
                } else {
                    this.results = results
                }
            })
        }
    }
}

Ergebniskomponente

Grundsätzlich genau die gleiche Ergebniskomponente, die Sie bereits haben, aber wenn dies loadingzutrifft oder wenn resultses null ist, können Sie ein gefälschtes Dataset erstellen, um es zu iterieren und Skelettversionen zu erstellen, wenn Sie möchten. Ansonsten können Sie die Dinge einfach so halten, wie Sie sie haben.

Eine weitere Option ist die Verwendung der Verlaufs-API .

Sobald Sie sich im Ergebnisbildschirm befinden, können Sie den ReplaceState verwenden , um die URL im Verlauf des Browsers zu ersetzen.

Dies kann mit dem beforeEachHaken des Routers erfolgen.

Sie müssen beim Laden loadingder Daten eine Variable global oder in localStorage in der Komponente speichern (bevor Sie zur resultsKomponente umleiten ):

export default {
  name: "results",
  ...
  importantTask() {
    // do the important work...
    localStorage.setItem('DATA_LOADED', JSON.stringify(true));
    this.$router.push({path: "/results/xxxx"});
  }
}

Und dann sollten Sie im beforeEach-Hook nach dieser Variablen suchen und zur richtigen Komponente springen:

// router.js...
router.beforeEach((to, from, next) => {
  const dataLoaded = JSON.parse(localStorage.getItem('DATA_LOADED'));
  if (to.name === "loading" && dataLoaded)
  {
    if (from.name === "results")
    {
      next({ name: "main"} );
    }
    if (from.name === "main")
    {
      next({ name: "results"} );
    }
  }
  next();
});

Denken Sie auch daran, den Wert in Ihrer mainKomponente auf false zurückzusetzen, wenn Sie auf die Abfrageschaltfläche klicken (bevor Sie zur loadingKomponente weiterleiten):

export default {
  name: "main",
  ...
  queryButtonClicked() {
    localStorage.setItem('DATA_LOADED', JSON.stringify(false));
    this.$router.push({path: "/loading"});
  }
}

Ihr Ladebildschirm sollte überhaupt nicht vom Vue-Router gesteuert werden. Die beste Option ist die Verwendung eines Modals / Overlays für Ihren Ladebildschirm, das von Javascript gesteuert wird. Es gibt viele Beispiele für Vue. Wenn Sie nichts finden können, hat vue-bootstrap einige einfache Beispiele zu implementieren.