Arahkan ulang saat startup dengan URL browser yang diberikan


9

Saya membuat aplikasi Vue baru dengan jalur dasar. Karena aplikasi ini tertanam ke dalam aplikasi Vue lain, aplikasi ini tidak membuat router-viewstartup. 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.replaceselalu 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 /twokapan pun urlnya /. Saya hanya ingin membuat tampilan Twoketika urlnya /two. Saat ini tidak.

Apa yang salah? Mungkin saya bahkan tidak perlu pengalihan itu, dan bisa menyelesaikan masalah dengan cara yang lebih elegan.


Maksud Anda, Anda ingin me-render komponen One ketika Anda menulis - / my-embedded-app / one sebagai URL dan komponen Dua untuk - / my-embedded-app / two? Jika ya, apakah Anda mencoba - {path: 'two', komponen: Two,} Menghapus '/' dari '/ two'
urvashi

Ya persis. Saya mencoba pendekatan Anda tetapi kemudian saya mendapat peringatan bahwa rute ini harus menggunakan garis miring terkemuka. Saat menjalankan aplikasi, rute ini tidak berfungsi ..
hrp8sfH4xQ4

dapatkah Anda mengubah urutan rute Anda?
VariableVasasMT

Jawaban:


1

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

mode:"hash"

0

diperbarui: jsfiddle

Apa yang akhirnya terjadi adalah yang route.currentRoute.fullPathdieksekusi sebelum router siap.


Itu tidak mengubah apa pun. router.currentRoute.fullPathmasih kembali /daripada /twosaat memanggillocalhost:3000/apps/my-embedded-app/two
hrp8sfH4xQ4

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

maaf itu tidak berhasil. Ketika saya menggunakan event onReady, saya bahkan mendapatkan kesalahan inimessage: "Navigating to current location ("/subApps/app-one") is not allowed"
hrp8sfH4xQ4

@ hrp8sfH4xQ4 saya sarankan Anda membuat jsfiddle dan menjelaskan apa yang Anda butuhkan dan mungkin orang dapat mengubahnya untuk Anda, kami tidak dapat mereproduksi masalah dengan tepat.
VariableVasasMT

maaf saya tidak bisa mereproduksi ini dengan biola. Server file diperlukan untuk wadah IFrame. Tapi ini adalah repositori untuk keperluan pengujian github.com/byteCrunsher/router-startup
hrp8sfH4xQ4

0

Coba beforeEnter. Lihatlah kode di bawah ini:

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

Baca lebih lanjut tentang penjaga Navigasi di sini


maaf, sama untuk jawaban Tony19. Saya tidak ingin mengarahkan pengguna. Saya ingin membuat Twotampilan jika url browser .../two. Saat ini tidak
hrp8sfH4xQ4

0

Bisakah 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

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>

Masalah ini terkait dengan ini di sini stackoverflow.com/questions/58397766/… dan saya membuat repositori kecil untuk keperluan pengujian github.com/byteCrunsher/router-startup
hrp8sfH4xQ4
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.