Saya membuat aplikasi Vue baru dengan jalur dasar. Karena aplikasi ini tertanam ke dalam aplikasi Vue lain, aplikasi ini tidak membuat router-view
startup. Jika Anda ingin tahu lebih banyak tentang bagaimana atau mengapa aplikasi ini disematkan ke aplikasi lain, silakan lihat di sini:
pasang aplikasi Vue ke dalam wadah aplikasi Vue utama
dan jawaban saya sendiri untuk masalah ini:
https://stackoverflow.com/a/58265830/9945420
Ketika memulai aplikasi saya, itu membuat semuanya kecuali router-view
. Saya ingin mengarahkan ulang saat startup dengan URL browser yang diberikan. Ini adalah konfigurasi router saya :
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;
Saya ingin aplikasi membuat komponen Dua saat menelepon .../my-embedded-app/two
. Sayangnya, router.replace
selalu dialihkan ke /
(begitu juga URL peramban .../my-embedded-app/
). Saya debugged router
, dan melihat bahwa jalan itu /
, tapi saya harapkan itu terjadi /two
.
Catatan penting:
Saya tidak ingin mengarahkan pengguna ke /two
kapan pun urlnya /
. Saya hanya ingin membuat tampilan Two
ketika urlnya /two
. Saat ini tidak.
Apa yang salah? Mungkin saya bahkan tidak perlu pengalihan itu, dan bisa menyelesaikan masalah dengan cara yang lebih elegan.
sumber
Jawaban:
Itu perilaku normal, itu adalah cara aplikasi halaman tunggal bekerja. Tanda "seperti" - tanda # - artinya tautan tidak akan memindahkan aplikasi ke halaman lain.
sehingga Anda dapat mengubah mode router ke
sumber
diperbarui: jsfiddle
Apa yang akhirnya terjadi adalah yang
route.currentRoute.fullPath
dieksekusi sebelum router siap.sumber
router.currentRoute.fullPath
masih kembali/
daripada/two
saat memanggillocalhost:3000/apps/my-embedded-app/two
router.onReady(() => { router.replace(router.currentRoute.fullPath); });
message: "Navigating to current location ("/subApps/app-one") is not allowed"
Coba
beforeEnter
. Lihatlah kode di bawah ini:Baca lebih lanjut tentang penjaga Navigasi di sini
sumber
Two
tampilan jika url browser.../two
. Saat ini tidakBisakah Anda memberikan repo github atau beberapa untuk menguji yang sebenarnya?
Kalau tidak, ide pertama saya adalah menggunakan rute anak-anak dengan tampilan "kosong" sebagai basis, di sini contoh tentang apa yang saya coba. (bekerja dalam kasus saya)
router.js
Base.vue
One.vue
Two.vue
sumber