vue.js - "Unknown custom element: "升级到Vue 2

Question

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

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in component ...[path to component is called in]

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 选择器，如在文档中:

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

虽然这与 router-link 无关不可用，我怀疑可能有多个 Vue 实例，如果你有多个 container元素。除了上述之外，我找不到任何其他代码错误。