web-dev-qa-db-fra.com

Comment le routeur Vue peut-il obtenir le chemin de route actuel des modules chargés paresseux au chargement de la page?

J'ai une application vue avec un routeur configuré comme suit:

import index from './components/index.vue';
import http404 from './components/http404.vue';

// module lazy-loading
const panda= () => import(/* webpackChunkName: "group-panda" */ "./components/panda/panda.vue");
// ...

export const appRoute = [
  {
    path: "",
    name: "root",
    redirect: '/index'
  },
  {
    path: "/index",
    name: "index",
    component: index
  },
  {
    path: "/panda",
    name: "panda",
    component: panda
  },
  //...
  {
    path: "**",
    name: "http404",
    component: http404
  }
];

Donc, le module de panda est chargé paresseux. Toutefois, lorsque je navigue vers la page panda, un fichier console.log () de this.$route.path dans App.vue de mounted() ne renvoie que le cycle de vie.

"/"

au lieu de

"/Panda"

Mais la page d'index fonctionne bien, elle montre exactement

"/indice"

comme prévu.

Alors, comment le routeur Vue peut-il obtenir correctement le chemin actuel d’une page chargée paresseux, lorsque la page est initialement chargée? Ai-je oublié quelque chose?

Edit:

Toutefois, il peut détecter le chemin correct après les recharges à chaud de Webpack. Il attrape "/" lors de la première visite de panda, mais après avoir modifié quelque chose dans le code source, le rechargement à chaud de webpack-dev-server, puis il obtient "/ panda".

Donc, je suppose que cela a quelque chose à voir avec le cycle de vie de Vue.

javascriptvue.jsvue-router
24
Valorad

Peut-être devez-vous utiliser $route pas $router

vérifier ici: https://jsfiddle.net/nikleshraut/chyLjpv0/19/

Vous pouvez aussi le faire par $router de cette façon

https://jsfiddle.net/nikleshraut/chyLjpv0/20/

27
Niklesh Raut

Il y a une propriété currentRoute qui a fonctionné pour moi: this.$router.currentRoute

25
Andre

Utilisez this.$route.path. Simple et efficace.

8
Nuno Ribeiro