Bagaimana cara mendorong vue-router tanpa menambah histori?

Saya memiliki urutan berikut yang terjadi:

• Layar utama

• Memuat layar

• Layar hasil

Di beranda, ketika seseorang mengklik tombol, saya mengirimnya ke layar pemuatan, melalui:

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

Dan begitu tugas mereka selesai, mereka dikirim ke layar hasil melalui

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

Masalahnya adalah, biasanya mereka ingin beralih dari hasil kembali ke layar utama, tetapi ketika mereka mengklik kembali, mereka dikirim ke memuat lagi yang mengirim mereka kembali ke hasil, sehingga mereka terjebak dalam loop tak terbatas & tidak dapat pergi kembali ke layar utama.

Ada ide bagaimana cara memperbaikinya? Idealnya saya suka jika ada opsi seperti:

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

yang akan mengirim mereka ke rute tanpa menambahkannya ke riwayat.

Ada cara sempurna untuk menangani situasi ini

Anda dapat menggunakan pelindung dalam-komponen untuk mengontrol rute di tingkat granul

Buat perubahan berikut dalam kode Anda

Di komponen layar utama

Tambahkan penjaga beofreRouteLeave ini dalam opsi komponen, sebelum pergi ke 'layar hasil' Anda mengatur rute untuk pergi hanya melalui layar memuat

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

Dalam memuat komponen layar

Jika rute kembali dari hasil ke pemuatan, rute tersebut seharusnya tidak mendarat di sini dan langsung melompat ke layar utama

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

Di layar memuat, Penjaga beforeRouteEnter TIDAK memiliki akses ke ini, karena penjaga dipanggil sebelum navigasi dikonfirmasi, sehingga komponen yang masuk baru bahkan belum dibuat. Jadi, manfaatkan ini, Anda tidak akan mendapatkan panggilan tak terbatas yang diputuskan saat merutekan dari layar hasil

Dalam komponen layar hasil

jika Anda menggunakan kembali maka seharusnya tidak mendarat di pemuatan dan langsung melompat ke layar utama

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

Saya baru saja membuat aplikasi vue kecil untuk mereproduksi masalah yang sama. Ini berfungsi di lokal saya sesuai pertanyaan Anda. Semoga ini bisa menyelesaikan masalah Anda juga.

Saya kira router.replaceadalah cara untuk pergi - tetapi masih beberapa garis pemikiran (belum diuji):

Pada dasarnya pada $routerperubahan itu membuat komponen pemuatan sampai memancarkan load:stop, kemudian ia membuatrouter-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 {}

Ini adalah panggilan yang sulit mengingat sedikitnya yang kita ketahui tentang apa yang terjadi dalam rute pemuatan Anda.

Tapi...

Saya tidak pernah memiliki kebutuhan untuk membangun rute pemuatan, hanya komponen pemuatan yang akan diberikan pada beberapa rute selama tahap pengumpulan data.

Satu argumen untuk tidak memiliki rute pemuatan adalah bahwa pengguna berpotensi menavigasi langsung ke URL ini (secara tidak sengaja) dan kemudian sepertinya tidak akan memiliki konteks yang cukup untuk mengetahui ke mana harus mengirim pengguna atau tindakan apa yang harus diambil. Meskipun ini bisa berarti bahwa ia jatuh ke rute kesalahan pada titik ini. Secara keseluruhan, bukan pengalaman hebat.

Lain adalah bahwa jika Anda menyederhanakan rute Anda, navigasi antar rute menjadi lebih sederhana dan berperilaku seperti yang diharapkan / diinginkan tanpa menggunakan $router.replace .

Saya mengerti ini tidak menyelesaikan pertanyaan dengan cara Anda bertanya. Tapi saya sarankan memikirkan kembali rute pemuatan ini.

Aplikasi

<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')

Kulit

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

Halaman Utama

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

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

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

Halaman Hasil

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

Komponen Hasil

Pada dasarnya komponen hasil yang sama persis sudah Anda miliki, tetapi jika loadingitu benar, atau jika resultsadalah nol, bagaimanapun Anda suka, Anda dapat membuat dataset palsu untuk beralih dan membuat versi kerangka, jika Anda mau. Kalau tidak, Anda bisa menyimpan barang-barang seperti yang Anda miliki.

Pilihan lain adalah menggunakan API Sejarah .

Setelah Anda berada di layar Hasil, Anda dapat menggunakan ReplaceState untuk mengganti URL dalam riwayat browser.

Ini bisa dilakukan dengan beforeEachkait dari router.

Yang perlu Anda lakukan adalah Anda harus menyimpan variabel secara global atau di localStorage di loadingkomponen saat data dimuat (sebelum mengarahkan ke resultskomponen):

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

Dan kemudian Anda harus memeriksa variabel ini di hook sebelumEach dan lompat ke komponen yang benar:

// 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();
});

Juga, jangan lupa untuk mereset nilai ke false di mainkomponen Anda ketika tombol kueri diklik (sebelum merutekan ke loadingkomponen):

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

Layar pemuatan Anda seharusnya tidak dikontrol oleh vue-router sama sekali. Pilihan terbaik adalah menggunakan modal / hamparan untuk layar pemuatan Anda, dikendalikan oleh javascript. Ada banyak contoh untuk vue. Jika Anda tidak dapat menemukan apa pun maka vue-bootstrap memiliki beberapa contoh mudah untuk diterapkan.