时间戳

首页 > 解决方案 > [Vue 警告]：未知的自定义元素：，可能是模块冲突？

javascript - [Vue 警告]：未知的自定义元素：，可能是模块冲突？

问题描述

我正在尝试在我的项目中使用 vue-router ，从此处输入链接描述中采用。

./router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import VesselSearch from '../components/VesselSearch';
import Login from '../components/Login';

Vue.use(VueRouter);

let router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'vessel-search',
            component: VesselSearch,
            meta: {
                requiresAuth: true,
            }
        },
        {
            path: '/login',
            name: 'login',
            component: Login,
            meta: {
                guest: true
            }
        },
    ]
})

export default router;

main.js

import '@fortawesome/fontawesome-free/css/all.min.css'
import 'mdbvue/lib/css/mdb.min.css'
import Vue from 'vue/dist/vue.js';
import App from './App';
import router from './router';
import InstantSearch from 'vue-instantsearch';

Vue.config.productionTip = false;

Vue.use(InstantSearch);

new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>',
})

如果我检查使用npm list vue-router我得到：

+-- mdbvue@6.7.3
| `-- vue-router@3.5.2  deduped
`-- vue-router@3.5.2

好像我有 2 个 vue-router 模块，一个包含在mdbootstrap模块中。如果是问题，我该如何解决？

标签： javascriptvue.jsvue-routermdbootstrap

解决方案

这里的问题是您将路由器注册到另一个 vue 实例并且该实例没有主要组件。这是解决方案在您的router/index.js中删除行

 import VueRouter from 'vue-router';
 Vue.use(Router)

并在您的main.js中添加这些行

 import VueRouter from 'vue-router';
 Vue.use(Router)

你在这里检查它 ht ​​tps://codesandbox.io/s/lively-voice-1dutp

推荐阅读