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

Question

我试图在我的项目中使用vue-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