Redirection au démarrage par l'URL du navigateur donné

Question

J'ai créé une nouvelle application Vue avec un chemin de base. Étant donné que l'application est intégrée dans une autre application Vue, cette dernière ne rend pas le chemin de base. router-view au démarrage. Si vous souhaitez en savoir plus sur la manière dont cette application est intégrée dans une autre application ou sur la raison pour laquelle elle l'est, veuillez consulter ce lien :

monter les applications Vue dans le conteneur de l'application Vue principale

et ma propre réponse à ce problème :

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

Lorsque je démarre mon application, elle rend tout sauf l'élément router-view . Je veux rediriger au démarrage par l'URL donnée du navigateur. Voici mon routeur 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;

Je veux que l'application rende le composant Deux lors de l'appel .../my-embedded-app/two . Malheureusement, router.replace redirige toujours vers / (l'URL du navigateur est donc .../my-embedded-app/ ). J'ai débogué le router et j'ai vu que le chemin est / mais je m'attendais à ce que ce soit /two .

Remarque importante : Je ne veux pas rediriger l'utilisateur vers /two lorsque l'url est / . Je veux juste rendre la vue Two lorsque l'url est /two . Actuellement, ce n'est pas le cas.

Qu'est-ce qui peut bien se passer ? Peut-être que je n'ai même pas besoin de cette redirection, et que je peux résoudre le problème d'une manière plus élégante.

Answer 1

C'est le comportement normal, c'est la façon dont les applications à page unique fonctionnent. Le signe "dièse" - comme # - signifie que les liens ne déplaceront pas l'application vers une autre page.

pour que vous puissiez changer le mode du routeur en

mode:"hash"

Answer 2

Mis à jour : jsfiddle

Ce qui s'est passé, c'est que route.currentRoute.fullPath a été exécuté avant que le routeur ne soit prêt.

Answer 3

Essayez beforeEnter . Regardez le code ci-dessous :

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

En savoir plus sur les gardes de navigation aquí

Answer 4

Pourriez-vous fournir un repo github ou autre pour tester l'actuel ?

Sinon, ma première idée est d'utiliser des routes enfants avec une vue "vide" comme base, voici un exemple de ce que j'ai essayé (qui fonctionne dans mon cas).

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>

Deux.vue

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