Перенаправление при запуске по указанному URL браузера

9

Я создал новое приложение 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;

Я хочу, чтобы приложение отображало компонент Two при вызове .../my-embedded-app/two. К сожалению, router.replaceвсегда перенаправляет на /(так URL браузера .../my-embedded-app/). Я отладил routerи увидел, что путь есть /, но я ожидаю, что он будет /two.

Важное примечание: я не хочу перенаправлять пользователя, /twoкогда URL-адрес /. Я просто хочу сделать вид, Twoкогда URL-адрес /two. В настоящее время это не так.

Что может быть не так? Может быть, мне даже не нужно это перенаправление, и я могу решить проблему более элегантным способом.

hrp8sfH4xQ4
источник
Вы имеете в виду, что вы хотите отобразить компонент One, когда пишете - / my-embedded-app / one как URL, а компонент Two для - / my-embedded-app / two? Если да, пробовали ли вы - {путь: 'два', компонент: два,} Удаление '/' из '/ два'
urvashi
Да, точно. Я попробовал ваш подход, но затем получил предупреждение, что этот маршрут должен использовать начальный слеш. При запуске приложения этот маршрут тогда не работал ..
hrp8sfH4xQ4
Вы можете изменить порядок своего маршрута?
ПеременнаяVasasMT

Ответы:

1

Это нормальное поведение, так работает одностраничное приложение. Знак «как» в виде фунта означает, что ссылки не будут перемещать приложение на другую страницу.

так что вы можете изменить режим маршрутизатора на

mode:"hash"
Мухаммед Эльбадави
источник
0

обновлено: jsfiddle

Завершилось то, что route.currentRoute.fullPathбыло выполнено до того, как маршрутизатор был готов.

VariableVasasMT
источник
Это ничего не изменило. router.currentRoute.fullPathпо-прежнему возвращается /вместо /twoвызоваlocalhost:3000/apps/my-embedded-app/two
hrp8sfH4xQ4
попробуйтеrouter.onReady(() => { router.replace(router.currentRoute.fullPath); });
VariableVasasMT
извини, что не сработало. Когда я использую событие onReady, я даже получаю эту ошибкуmessage: "Navigating to current location ("/subApps/app-one") is not allowed"
hrp8sfH4xQ4
@ hrp8sfH4xQ4 Я предлагаю вам сделать jsfiddle и точно объяснить, что вам нужно, и, возможно, люди могут изменить его для вас, мы не можем точно воспроизвести проблему.
ПеременнаяVasasMT
извините, я не могу воспроизвести это с скрипкой. Файловый сервер необходим для контейнера IFrame. Но это репозиторий для целей тестирования github.com/byteCrunsher/router-startup
hrp8sfH4xQ4
0

Попробуй 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
    }
  ]
});

Подробнее о штурманах здесь

Раджив Радхакришнан
источник
извините, то же самое для ответа Тони19. Я не хочу перенаправлять пользователя. Я хочу сделать Twoпредставление, если URL браузера .../two. В настоящее время это не так
hrp8sfH4xQ4
0

Не могли бы вы предоставить репозиторий Github или некоторые из них, чтобы проверить фактическое?

В противном случае моя первая идея - использовать дочерние маршруты с «пустым» представлением в качестве базы, вот пример того, что я пробовал. (работает в моем случае)

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>
триумфатор-Габ
источник
Эта проблема связана с этим здесь stackoverflow.com/questions/58397766/… и я создал небольшой репозиторий для тестирования github.com/byteCrunsher/router-startup
hrp8sfH4xQ4