Başlangıçta verilen tarayıcı URL'sine göre yönlendir

Temel yolu olan yeni bir Vue uygulaması oluşturdum. Uygulamanın başka bir Vue uygulamasına gömülü olması nedeniyle, bu uygulama router-viewbaşlangıçta görüntülenmez. Bu uygulamanın başka bir uygulamaya nasıl veya neden gömülü olduğu hakkında daha fazla bilgi edinmek isterseniz lütfen buraya bir göz atın:

Vue uygulamalarını ana Vue uygulamasının kapsayıcısına bağlama

ve bu soruna kendi cevabım:

https://stackoverflow.com/a/58265830/9945420

Uygulamamı başlatırken router-view,. Başlangıçta verilen tarayıcı URL'sine göre yönlendirmek istiyorum. Bu benim yönlendirici yapılandırma:

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;

Uygulamanın arama yaparken İkinci bileşeni oluşturmasını istiyorum .../my-embedded-app/two. Ne yazık ki, router.replaceher zaman adresine yönlendirilir /(tarayıcı URL'si böyle olur .../my-embedded-app/). Hata ayıkladım routerve yolun olduğunu gördüm /, ama olmasını beklerdim /two.

Önemli not: Kullanıcıyı /twourl olduğunda yönlendirmek istemiyorum /. Sadece Twourl olduğunda görünümü oluşturmak istiyorum /two. Şu anda değil.

Ne yanlış olabilir? Belki bu yönlendirmeye bile ihtiyacım yok ve sorunu daha zarif bir şekilde çözebilirim.

Normal davranış budur, tek sayfalık uygulama böyle çalışır. "Pound" benzeri # işareti, bağlantıların uygulamayı başka bir sayfaya taşımayacağı anlamına gelir.

böylece yönlendirici modunu

mode:"hash"

güncellendi: jsfiddle

Yaralanan şey, route.currentRoute.fullPathyönlendirici hazır olmadan önce yürütülmüş olmasıdır.

Deneyin beforeEnter. Aşağıdaki koda bir göz atın:

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

Gezinme korumaları hakkında daha fazla bilgiyi buradan edinebilirsiniz

Gerçek test etmek için bir github repo veya bazı sağlayabilir misiniz?

Aksi takdirde ilk fikrim "boş" manzaralı çocuk rotalarını temel olarak kullanmak, burada denediğim şeyle ilgili bir örnek. (benim durumumda çalışıyor)

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>