web-dev-qa-db-fra.com

Comment enregistrer des composants globaux avec vue-router

J'utilise Vue.js avec la vue-cli. J'ai choisi la configuration du webpack. J'ai câblé le fichier main.js pour le routage, bien que je ne trouve pas un moyen d'enregistrer globalement mes composants.

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Companies from './components/pages/Companies'
import Income from './components/pages/Income'
import Login from './components/pages/Login'

Vue.use(VueRouter)

let router = new VueRouter()

router.map({
  '/companies': {
    component: Companies
  },
  '/income': {
    component: Income
  },
  'login': {
    component: Login
  }
})

router.start(App, 'body')

App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
import {Auth} from './lib/api'
import Loader from './components/Loader'

export default {
  components: {
    Loader
  },
  ready () {
    Auth.isLoggedIn().then(
      (response) => {
        if (response.data === false) {
          this.$router.go('/login')
        } else {
          this.$router.go('/companies')
        }
      },
      (response) => {
        this.$router.go('/login')
      }
    )
  }
}
</script>

Lorsque j'utilise mon composant Loader dans une vue, j'obtiens l'avertissement suivant.

[Vue warn]: Élément personnalisé inconnu: - avez-vous enregistré le composant correctement? Pour les composants récursifs, assurez-vous de fournir l'option "nom".

J'ai fourni le nom dans le composant et cela n'a fait aucune différence. J'utilise le composant chargeur dans la vue de connexion.
J'ai découvert que je devais soit définir le composant dans le composant que je vais utiliser, soit globalement. Cependant, je ne peux pas savoir comment le définir globalement avec le routage.

javascriptvue.jsvue-router
18
Swimburger

De la façon dont vous l'avez configuré maintenant, le composant chargeur n'est disponible que localement dans le modèle du composant App.

Le routage n'a aucune influence sur l'enregistrement global des composants, faites-le comme sans routeur:

// main.js, before all the router stuff:
import Loader from './components/Loader'
Vue.component('loader', Loader)

ou enregistrez-le localement dans votre composant Login. Comme vous l'avez déjà fait dans App.vue, vous savez quoi faire avec Loader.vue

21
Linus Borg