Перенаправлення при запуску за вказаною URL-адресою браузера

Я створив новий додаток Vue з базовим шляхом. Через те, що додаток вбудовано в інший додаток Vue, цей додаток не відображається при router-viewзапуску. Якщо ви хочете дізнатися більше про те, як або чому цей додаток вбудований в інший додаток, перегляньте тут:

монтуйте програми Vue в контейнер основного додатка Vue

і моя власна відповідь на цю проблему:

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

Коли я запускаю свою програму, вона видає все, крім router-view. Я хочу перенаправити при запуску за вказаною URL-адресою браузера. Це моя конфігурація маршрутизатора :

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;

Я хочу, щоб програма передавала компонент Два під час дзвінка .../my-embedded-app/two. На жаль, router.replaceзавжди переспрямовується на /(так URL-адреса браузера .../my-embedded-app/). Я налагодив routerі побачив, що шлях є /, але я очікував би, що він буде /two.

Важлива примітка: я не хочу переспрямовувати користувача на те, /twoколи є URL-адреса /. Я просто хочу надати перегляд, Twoколи є URL-адреса /two. В даний час це не так.

Що може бути не так? Можливо, мені це перенаправлення навіть не потрібно, і я можу вирішити проблему більш елегантно.

Це нормальна поведінка, це спосіб роботи однієї сторінки. Знак "фунт" - як # - означає, що посилання не переміщуватимуть додаток на іншу сторінку.

тож ви можете змінити режим маршрутизатора на

mode:"hash"

оновлено: jsfiddle

Що закінчилося, це те, що route.currentRoute.fullPathбуло виконано до того, як маршрутизатор був готовий.

Спробуйте beforeEnter. Подивіться на код нижче:

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

Детальніше про навігаційні охоронці тут

Чи можете ви надати github repo або щось для перевірки фактичного?

Інакше моя перша ідея - використовувати дитячі маршрути із «порожнім» поданням як основу, ось приклад того, що я спробував. (працює в моєму випадку)

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>

Двоє

<template>
  <div>Two</div>
</template>