Vue-Komponente nicht in Router-Ansicht gerendert

Question

vor kurzem habe ich Vue in Frontend und Vue-Router damit verwendet, um ein SPA zu gestalten.

Mein Problem ist, dass ich nicht in der Lage bin eine Komponente in Haupt Vue Instanz definiert zuzugreifen:

import ElementComponent from './Element'; 

const app = new Vue({ 
    el: '#app', 
    router, 
    components: { Element: ElementComponent } 
}); 

Immer, wenn ich <element></element> im #app Umfang tue die Komponente gerendert wird, aber ich kann nicht das Element verwendet innen eine Routenkomponente.

Meine Strecken sind wie folgt definiert:

var routes = [ 
{ path: '/section/part', component: require('../views/Part') }]; 

Und dann Router-Instanz zur Verfügung gestellt:

new VueRouter({routes}); 

Breakpoint- wenn ich versuche <element></element> innerhalb Part Komponente Vorlage nenne ich dies in vuedevtools erhalten: [Vue warn]: Unbekanntes benutzerdefiniertes Element: - Haben Sie die Komponente korrekt registriert? Stellen Sie für rekursive Komponenten sicher, dass Sie die Option "name" angeben. (in unter C: \ Benutzer \ Doe \ Projekt \ js \ views \ Part.vue)

Answer 1

Sie müssen die Komponente in die views/Part Komponente importieren. Machen Sie dasselbe wie in der Vue-Haupt-Instanz, aber nur in der Teile-Komponente.

Ich glaube, wenn Sie Komponenten global machen wollen müssen Sie die Verwendung

Vue.component('my-component', { 
    template: '<div>A custom component!</div>' 
}) 

Referenz https://vuejs.org/v2/guide/components.html#Registration