Question

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

[Vue警告]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请务必提供＆＃34; name＆＃34;选项。（在组件中找到... [调用组件的路径]

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不可用无关，但我怀疑如果你有多个container元素，可能会有多个Vue实例。除了上述内容，我发现代码没有其他任何问题。

Answer 2

更新vue-router时可能出现问题，你肯定使用正确的版本吗？尝试从项目根目录中运行npm list vue-router，它应输出2.0.x版本：

vue-router@2.0.3

任何小于v2的东西都没有路由器链接，如果是这种情况，请尝试：

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

如果版本正确，则可能值得简化项目以解决此问题。我做了一个小提琴：

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

如果你复制html＆amp;这个基本设置的js是否解决了这个问题？如果是这样，可能是你的其他Vue.use()插件配置正在破坏vue-router。

Answer 3

对于正在使用Jest且不想在router-link进行任何测试的任何人-但想摆脱编译错误-只需将其存根即可：

    wrapper = shallowMount(Flow, {
        propsData: {},
        mocks: {},
        stubs: ['router-view'], // add this
        store,
        localVue,
    });

＆＃34;未知的自定义元素：<router-link>＆＃34;升级到Vue 2

3 个答案: