Vuejs Lazy Loading Routes problème de disparition <router-view>

Xation
Javascript

Bonjour à tous,

J'ai suivis la formation VueJS 2 Vue Router avec plus ou moins de succès. Je rencontre un problème j'active le Lazy Loading.

Ce que j'obtiens quand

  1. Je clique sur un lien comme "catalog-rules" j'ai bien le fichier "CatalogRules.vue" qui est chargé en async.
  2. Ensuite je clique sur "terms". Le fichier Terms.vue est chargé.
  3. Mais quand je re-clique sur le lien "catalog-rules"... Pouf mon "router-view" disparait et le fichier "CatalogRules.vue" n'est pas chargé. Ça reste vide

Quelqu'un sait pourquoi ça se passe de cette façon ?

Code

Les routes

 {
    path: '/catalog-rules',
    component: resolve => require(['./components/CatalogRules.vue'], resolve),
    name: 'catalog-rules'
 },
 {
    path: '/terms',
    component: resolve => require(['./components/Terms.vue'], resolve),
    name: 'terms'
 },

Les liens

<router-link :to="{ name: 'catalog-rules' }">Règles de publication</router-link>
<router-link :to="{ name: 'terms' }">Termes et Conditions</router-link>

App.vue

<div id="app">
        <header-blade></header-blade>
        <router-view></router-view>
        <footer-blade></footer-blade>
</div>

6 réponses

Xation
Auteur
Réponse acceptée

J'ai trouvé un utilisateur qui a exactement le même problème que moi dans les issues de github.

https://github.com/vuejs/vue-router/issues/1074

Hi, thanks for filling this issue. You're probably using webpack 2.0, and this is a known issue.aroundSolution: simply use System.import()(deprecated in recent versions) or import() instead of require for lazy loading. More info here: #862

Le problème vient de webpack 2. c'est un problème connu apparement.

@virax merci de ton aide et d'avoir prit le temps pour moi.

Virax

Salut,

Il me semble que ton attribut "resolve" est en trop, normalement ajouter un seul attribut component devrait marcher..

{
    path: '/terms',
    component: require('./components/Terms.vue'),
    name: 'terms'
 }

As-tu essayé de cette façon ?

Xation
Auteur

Hello,

Justement le resolve permet de faire le Lazy loading (découper en plusieurs fichier .js automatiquement). Si je l'enlève, ça marche, mais je n'ai plus le Lazy loading. Tout est compilé dans un seul fichier.

La syntax est celle de Jonathan dans la vidéo.

Virax

Re,

d'après la doc, si tu utilises webpack il faut utiliser a priori "require.ensure":
https://router.vuejs.org/en/advanced/lazy-loading.html

Aucune idée de pourquoi la version raccourcie ne marche pas chez toi.
T'as essayé la version longue?

Xation
Auteur

@Virax Si tu regarde en dessous, il y a écrit : There's also an alternative code-split syntax using AMD style require, so this can be simplified to 

const Foo = resolve => require(['./Foo.vue'], resolve)

qui est la syntax que @grafikart utilise et que j'utilise non ?

Virax

Je crois que @Grafikart doit être le plus apte à répondre à la question.

Ps: Peut être qu'en utilisant cette syntaxe, issue du même genre de probleme que toi, ça peut fonctionner:

"You used export default inside the component, which only works with import.
When you require it, it will give you an object of {default: (your component)}"

Si c'est ton cas, ça devrait marcher:

https://github.com/vuejs/vue-router/issues/656#issuecomment-249180199