Vue2+webpack-simple中<router-view>未知组件报错求助

嘿，我看到你第一次用vue-router就碰到了这个常见小坑！报错提示<router-view>是未知自定义元素，核心问题出在你注册VueRouter插件的代码写错了，咱们一步步来修复：

1. 修复VueRouter的注册错误 #

看你的main.js里这行代码：

Vue.use('VueRouter');

这里你传了字符串'VueRouter'，但Vue.use()需要接收的是你import进来的VueRouter插件对象，不是它的名字字符串。把引号去掉就对了！

修改后的完整main.js代码：

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Routes from './routes';

// 去掉引号，直接传入VueRouter对象
Vue.use(VueRouter);

const router = new VueRouter({
  routes: Routes,
});

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

2. 确认其他配置的正确性 #

你已经做对的部分：

• 安装的vue-router@3.0.1版本完全适配Vue 2，没问题；
• routes.js的路由数组导出格式正确，组件引入也没问题；
• App.vue里的<router-view>标签写法正确，Game/Login组件的结构也正常。

把代码修改后重新运行项目，<router-view>就能正常渲染对应的路由组件啦！

内容的提问来源于stack exchange，提问作者Kalreg