[Vue warn]: 未知的自定义元素：<router-view>，可能是模块冲突？

Question

我正在尝试在我的项目中使用 vue-router 从 enter link description here.

./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 模块中。如果是问题，我该如何解决？

Answer 1

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

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

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

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

你在这里查看 https://codesandbox.io/s/lively-voice-1dutp

[Vue warn]: 未知的自定义元素：<router-view>，可能是模块冲突？

[Vue warn]: Unknown custom element: <router-view>, possibly module conflict?

javascript

vue.js

vue-router

mdbootstrap