vue router-view报错解决

1 报错内容

我们在使用router-view组件的时候会遇到如下报错：

报错内容如下：

[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>

2 解决方案

报该错的原因是RouterView没有正确的注册。没有正确注册的原因有两个：

• vue版本和vue-router版本不匹配；
• 没有正确使用vue-router组件；

2.1 检查版本

1、对于vue版本和vue-router版本不匹配的情况，若是vue2项目，需要安装vue-router的版本小于3.x.x；

比如如下版本：

"vue-router": "3.5.0",

2、若是vue3项目，需要安装vue-router的版本大于4.x.x

比如如下版本：

"vue-router": "4.2.5",

注：不指定版本安装会默认安装最新版本，为4.x.x及以上，vue2项目使用回有问题，需要指定版本安装。

2.1 正确引入使用vue-router组件

1、对于vue2项目，引入之后需要进行use：

main.js文件：

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

router的index.js文件：

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import routers from "./practice/practice";
import echartsRouters from './practice/echarts'
Vue.use(VueRouter);
const allRouter = [...routers, ...echartsRouters];
const router = new VueRouter({
  mode: "history",
  routes: allRouter
});

export default router;

注：使用Vue.use(VueRouter)全局注册RouterView

更详细的内容请见vue-router引入使用内容请见：
vue3 vue-router使用详解
vue2 vue-router详解