vue.js - [Vue 警告] : Unknown custom element: <router-view> - did you register the component correctly?

Question

我在 CLI 模式下使用 Vue 2 和 webpack-simple。我有以下文件:

主要.js:

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Routes from './routes';
    
Vue.use('VueRouter');
    
const router = new VueRouter({
  routes: Routes,
});
    
new Vue({
  el: '#app',
  render: h => h(App),
  router: router,
});

App.vue:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
    
<script>
import Loader from './Loader.vue';
    
export default {
  name: 'app',
}
</script>
    
<style lang="scss">
</style>

路由.js:

import Game from './components/Game.vue';
import Login from './components/Login.vue';
    
export default [
  { path: '/', component: Game, name: "Game" },
  { path: '/login', component: Login, name: "Login" },
]

Game.vue 和 Login.vue 看起来一样:

<template>
  <div>
    Game
  </div>
</template>
    
<script>
export default {
  name: 'game',
}
</script>
    
<style lang="scss">
div {
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
</style>

不幸的是，启动一个文件给我一个错误:

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

路由器 View 标签也没有更改为正确的 html。我第一次使用 vue 路由器。它在 3.0.1 版本中通过 npm 安装

有什么建议吗？

Answer 1

您需要执行以下操作:

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

引用:https://router.vuejs.org/en/installation.html

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

希望对你有帮助