Wie man globale Komponenten mit vue-Router registriert

Question

Ich benutze Vue.js mit dem Vue-CLI. Ich habe mich für das Webpack-Setup entschieden. Ich habe die Datei main.js für das Routing verdrahtet, obwohl ich keine Möglichkeit finde, meine Komponenten global zu registrieren.

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> 

Wenn ich meine Loader-Komponente in irgendeiner Ansicht verwenden, erhalte ich die folgende Warnung.

[Vue warn]: Unbekanntes benutzerdefiniertes Element: - Haben Sie die Komponente korrekt registriert? Stellen Sie für rekursive Komponenten sicher, dass Sie die Option "name" angeben.

Ich stellte den Namen in der Komponente und es machte keinen Unterschied. Ich benutze die Loader-Komponente in der Login-Ansicht.
Ich fand heraus, dass ich entweder die Komponente in der Komponente definieren sollte, die ich verwenden werde oder global. Allerdings kann ich nicht herausfinden, wie man es global mit dem Routing definiert.

Answer 1

Die Art und Weise, wie Sie es eingerichtet haben, Die Ladekomponente ist nur lokal in der Vorlage der App-Komponente verfügbar.

Routing keinen Einfluss auf die globale Komponente Registrierung hat, tun Sie es einfach wie ohne Router:

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

oder lokal in Ihrem Login-Komponente registrieren. Wie Sie bereits in App.vue getan haben, wissen Sie, was mit Loader.vue zu tun ist