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>

routes.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安装

有什么建议吗？

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

希望对您有帮助

Answer 2

更改
Vue.use('VueRouter')
到
Vue.use(VueRouter)

Answer 3

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

Answer 4

我遇到了类似的问题，运行下面的命令为我修复了该问题。

npm install
npm install vue-router
npm run dev

Answer 5

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

npm install vue-router
npm run dev

Answer 6

我猜是由于您在示例中将vue-router作为字符串传递了，所以出现了问题。

改为使用此：

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,

})

Answer 7

确保在创建路由和使用 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警告]：未知的自定义元素：<router-view> - 您是否正确注册了组件？

7 个答案: