Vue3: Bagaimana untuk menghantar parameter ke laluan tanpa menambahkannya pada url dalam Vue3?

Question

Dalam Vue3, adakah terdapat cara untuk menghantar atribut kepada laluan tanpa memaparkan nilai dalam url?

Saya mentakrifkan laluan seperti ini:

{
    path: '/someRoute',
    name: 'someRoute',
    component: () => import('@/app/pages/SomeRoute.vue'),
    props: (route) => {
            ...route.params
        }, // <-- I've seen this method in Vue2 but in Vue3 the route.params is just empty here
}

Saya memanggil laluan ini:

<router-link :to="{ name: 'someRoute', params: { message: 'Some Message' } }">Some link</router-link>

Apabila saya menukar laluan kepada path: '/someRoute/:message', mesej dihantar dengan baik, tetapi saya hanya mahu mesej itu dihantar tanpa menunjukkannya dalam url.

Saya telah melihat beberapa contoh Vue2 menggunakan pendekatan ini (cth. https://stackoverflow.com/a/50507329/1572330), tetapi nampaknya ia tidak berfungsi dalam Vue3 lagi.

Juga semua contoh dalam dokumentasi Vue3 (https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js/https://v3.router.vuejs.org/ guide/essentials/passing-props.html) lulus nilainya melalui url itu sendiri, jadi saya tidak pasti sama ada ia masih boleh dilakukan.

Sebarang pemikiran tentang perkara ini akan membantu.

Answer 1

Akhirnya saya menjumpai beberapa kandungan yang berkaitan dalam log perubahan: https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

Nampaknya, tidak mungkin lagi menghantar atribut melalui parameter tanpa memaparkannya dalam url. Tetapi nasib baik, mereka mempunyai beberapa cadangan alternatif. Perkara yang paling berkesan untuk kes saya ialah menggunakan state: { ... } dan bukannya:

<router-link :to="{ name: 'someRoute', force: true, state: { message: 'Some Message' } }">Some link</router-link>

Kini, dalam kod halaman, saya membaca atribut daripada history.sate dan meletakkan nilai itu ke dalam apa jua atribut yang saya perlukan.

Jika url/laluan itu sendiri tidak berubah, anda perlu mempunyai cangkuk kemas kini dan gunakan force: true

public created() {
    this.message = window.history.state.message;
}

public updated() {
    this.message = window.history.state.message;
}

PS history.state Terdapat beberapa batasan, jadi dalam kes lain, salah satu cadangan lain dalam changelog mungkin lebih baik