Vue.js [Vue warn]：未知的自定义元素：<；路由器视图>；-您是否正确注册了该组件？

我在CLI模式下与webpack simple一起使用Vue 2。我有以下文件：

main.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>

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>

游戏
导出默认值{
名称：'游戏'，
}
div{
边框：1px纯红；
宽度：100px；
高度：100px
}

很遗憾，启动文件时会出现错误：

[Vue warn]：未知自定义元素：-您注册了吗 组件是否正确安装？对于递归组件，请确保 提供“名称”选项

此外，路由器视图标记未更改为正确的html。我第一次使用vue路由器。它已通过3.0.1版的npm安装

---

有什么建议吗？

我不知道这是否与您的问题有关，但您必须使用VueRouter变量“Vue.use（VueRouter）”而不是字符串“Vue.use（'VueRouter'）”

您需要执行以下操作：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

参考：

---

希望它能帮助您

我也遇到过类似的问题，运行下面的命令为我解决了这个问题

npm install
npm install vue-router
npm run dev

---

我在使用Vue js和laravel时遇到了类似的问题。 运行以下命令可以解决此问题：

npm install vue-router
npm run dev

---

我猜问题是由于您在示例中将

vue路由器

作为字符串传递所致

改用这个：

import VueRouter from 'vue-router'

然后使用Vue.use（）注册它，如下所示：

Vue.use(VueRouter)

当您使用es6样式导入时，您还可以对路由器使用es6样式的对象速记

 const router = new VueRouter({
    routes: Routes
})
new Vue({
  el: '#app',
  render: h => h(App),
  router,

})

更改

Vue.use（'VueRouter'）

到

---

Vue.use（VueRouter）

在创建路由和使用

VueRouter

之前，确保您需要告诉

Vue.js

您正在使用

VueRouter

。在使用

VueRouter

之前，请尝试以下操作：

 import Vue from "vue";
 import VueRouter from "vue-router";
 Vue.use(VueRouter);
 .....
 const routes = [{
      path: '/', component: Home, name: "Home"
     ......
 }]

---

祝你好运

原因是Vue。使用（'VueRouter'）而不是Vue。使用（VueRouter）更改：Vue.use（'VueRouter'）->到：Vue.use（VueRouter）。我尝试了你的答案，只有当你把“router”而不是“router:router”放在你的示例中定义的

router

变量的位置时，它才会起作用？我看不出来。我们不需要另一个重复的答案。见：

 const router = new VueRouter({
    routes: Routes
})
new Vue({
  el: '#app',
  render: h => h(App),
  router,

})

 import Vue from "vue";
 import VueRouter from "vue-router";
 Vue.use(VueRouter);
 .....
 const routes = [{
      path: '/', component: Home, name: "Home"
     ......
 }]