“未知的自定义元素：<router-link>”升级到Vue 2

Question

从vue 1和vue-router 0.7升级了应用程序，并在控制台中收到此错误

[Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。（位于组件中……[调用组件的路径]

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' );

如果我使用地址栏导航到路由，路由本身就可以正常工作，只是该router-link组件不是问题。

有任何想法吗？

Answer 1

您没有使用初始化路由器Vue.use。您需要执行以下操作：

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

Vue.use(VueRouter)

参考：https : //router.vuejs.org/en/installation.html

编辑：评论＃1和＃2后有更多想法：

您正在使用挂载应用程序.$mount( '.container' )。尽管这可以按预期工作，但是使用类选择器是有风险的。您确定只有一种<div class="container">元素吗？您可以尝试以更简化的方式使用id选择器，如docs中所示：

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

尽管这与router-link不可用无关，但我怀疑如果您有多个container元素，可能会有多个Vue实例。除上述以外，我找不到任何其他错误代码。