\[Vue 警告\]：未知的自定义元素：<router-view> - 您是否正确注册了组件？

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,
});

应用程序.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 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

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

有什么建议吗？

原文由 Kalreg 发布，翻译遵循 CC BY-SA 4.0 许可协议

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),
})

希望对你有帮助

原文由 Alex 发布，翻译遵循 CC BY-SA 4.0 许可协议