Перенаправление при запуске по указанному URL браузера - PullRequest
Новая
       99

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

10 голосов
/ 08 октября 2019

Я создал новое приложение Vue с базовым путем. Из-за того, что приложение встроено в другое приложение Vue, оно не отображает router-view при запуске. Если вы хотите узнать больше о том, как или почему это приложение встроено в другое приложение, посмотрите здесь:

монтирование приложений Vue в контейнер основного приложения Vue

и мой собственный ответ на эту проблему:

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

При запуске моего приложения оно отображает все, кроме router-view. Я хочу перенаправить при запуске по указанному URL браузера. Это мой маршрутизатор config: 

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. В настоящее время это не так.

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

Ответы [ 3 ]

0 голосов
/ 13 октября 2019

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

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

0 голосов
/ 16 октября 2019

Не могли бы вы предоставить репозиторий 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>
0 голосов
/ 11 октября 2019

обновлено: jsfiddle

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

...