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

Question

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

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>

路由.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]: 未知的自定义元素：- 您是否正确注册了该组件？对于递归组件，请确保提供“name”选项。

此外，“router-view”标签未更改为正确的HTML。 我第一次使用vue router。 它已通过npm在3.0.1版本中安装。

有什么建议吗？

- Kalreg

---

原因是使用了Vue.use('VueRouter')而不是Vue.use(VueRouter)。 - Kalreg

更改：Vue.use('VueRouter') -> 为：Vue.use(VueRouter) - Alex

Answer 1

你需要做以下事情：

You need to do the following:

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

参考：https://router.vuejs.org/zh/installation.html

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

希望这能对你有所帮助

- Alex

---

我尝试了你的答案，只有在你输入"router"而不是"router: router"时才有效。 - user6363467

Answer 2

变更：

Vue.use('VueRouter');

To:

Vue.use(VueRouter);

- Meister

---

我们不需要另一个重复的答案。请查看：https://dev59.com/5FUL5IYBdhLWcg3wYXF8#50963242 - sɐunıɔןɐqɐp

Answer 3

在创建路由和使用VueRouter之前，请确保告诉Vue.js你正在使用VueRouter。在使用VueRouter之前，请尝试以下操作：

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

祝你好运

- crispengari

Answer 4

我不知道这是否与你的问题有关，但你必须使用VueRouter变量"Vue.use(VueRouter)"而不是字符串"Vue.use('VueRouter')"。

- khereddine radouane

Answer 5

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

npm install vue-router
npm run dev

- Dip Roy

Answer 6

我猜问题出在你在示例中将vue-router作为字符串传递。

请改用以下代码：

import VueRouter from 'vue-router';

然后使用Vue.use()注册它，就像这样：

Vue.use(VueRouter);

如果你正在使用ES6的import语法，那么你也可以使用ES6风格的对象简写来定义路由。

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

- Mohibul Hassan

Answer 7

我曾经遇到过类似的问题，运行以下命令解决了我的问题。

npm install
npm install vue-router
npm run dev

- B.K