vue router-view报错解决

发布时间:2023年12月17日

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详解

文章来源:https://blog.csdn.net/m0_46309087/article/details/134982690
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。