"Unknown benutzerdefinierte Element: <router-link>" Upgraded zu Vue 2

Question

eine App vue 1 und vue-Router 0.7 Upgrade und immer diese Fehlermeldung in der Konsole

[Vue warn]: Unknown individuelle Element: - Hast du Registrieren Sie die Komponente richtig? Stellen Sie für rekursive Komponenten sicher, dass Sie die Option "name" angeben. (in der Komponente ... gefunden

import Vue from 'vue'; 
import VueResource from 'vue-resource'; 
import VueRouter from 'vue-router'; 
import gsap from 'gsap'; 

Vue.use(VueResource); 
Vue.use(VueRouter); 

window.flipster = require('jquery.flipster'); 
window.spritespin = require('SpriteSpin'); 

// Main Layout Components 
import Menu from './components/Menu.vue'; 
import Section from './components/Section.vue'; 

// Controller Layout Components 
import ControllerMenu from './components/Controller/Menu.vue'; 
import ControllerSection from './components/Controller/Section.vue'; 

// Generic Components 
import Tabs from './components/Tabs.vue'; 
Vue.component('tabs', Tabs); 

import Tab from './components/Tab.vue'; 
Vue.component('tab', Tab); 

import Chart from './components/Chart.vue'; 
Vue.component('chart', Chart); 

import ChartDev from './components/ChartDev.vue'; 

import Datastore from './DataStore'; 
Vue.use(Datastore); 

// controller check and other useful functionality 
import Helpers from './Helpers'; 
Vue.use(Helpers); 

import App from './App.vue'; 

window.eventHub = new Vue(); 

var router = new VueRouter({ 
    mode: 'history', 
    routes: [ 
     { 
      path: '/', 
      name: 'menu', 
      component: ControllerMenu 
     }, 
     { 
      path: 'sections/:sectionId', 
      name: 'section', 
      component: ControllerSection 
     }, 
     { 
      path: 'chart/:datasetId', 
      name: 'chart', 
      component: ChartDev 
     } 
    ] 
}); 

new Vue({ 
    router: router, 
    render(createElement) { 
     return createElement(App) 
    } 
}).$mount('.container'); 

[Pfad zur Komponente wird in genannt] Die Strecken selbst gut funktionieren, wenn ich sie mit der Adressleiste navigieren, es ist nur, dass router-link Komponente nicht ein Ding zu sein. ?.

Irgendwelche Ideen

Answer 1

Sie den Router nicht mit Vue.use initialisiert werden Sie müssen folgendes tun:

import Vue from 'vue' 
import VueRouter from 'vue-router' 

Vue.use(VueRouter) 

Ref: https://router.vuejs.org/en/installation.html

EDIT: Mehr Gedanken nach Kommentare # 1 und # 2:

Sie die Montage der App .$mount('.container') verwenden. Obwohl dies wie erwartet funktionieren kann, ist die Verwendung eines Klassenselektors riskant. Sind Sie sicher, dass Sie nur ein <div class="container"> Element haben? Sie können möglicherweise versuchen, wie in docs ein ID-Selektor in einem viel einfacheren Weg mit:

new Vue({ 
    el: "#app", 
    router: router, 
    render: h => h(App) 
}) 

Während dies nichts mit router-link sind nicht verfügbar zu tun hat, ich vermute, dass es mehrere Instanzen von Vue sein könnte, wenn Sie mehrere haben container Elemente. Abgesehen von den oben genannten kann ich nichts anderes falsch mit dem Code finden.

Answer 2

Vielleicht ist etwas schief gelaufen, als Sie den Vue-Router aktualisiert haben, verwenden Sie definitiv die richtige Version? Versuchen Sie npm list vue-router aus Ihrem Projekt root läuft und es ausgeben soll eine 2.0.x-Version:

vue-router@2.0.3

etwas weniger als v2 nicht Router-Verbindung haben, wenn dies ist der Fall Versuch:

npm uninstall vue-router 
npm install vue-router --save-dev 

---

Wenn die Version korrekt ist dann das Projekt zu vereinfachen kann sich lohnen, diese zu beheben. Ich habe eine Geige:

https://jsfiddle.net/thebigsurf/ajpuw8hq/

Wenn Sie über den HTML-Code kopieren & js aus dieser grundlegenden Einrichtung ist es das Problem zu beheben? Wenn ja, kann es sein, dass eine Ihrer anderen Vue.use() Plugin-Konfigurationen vue-router bricht.