Arahkan ulang saat startup dengan URL browser yang diberikan

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.

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"

diperbarui: jsfiddle

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

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

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>