error ‘createWebHashHistory‘ is not defined no-undef（Vue项目配置路由）

**页面理想状态：**左侧的导航菜单部分固定，右侧主体内容跟随路由切换我使用的vue3，当我开发到路由部分时，我直接执行了如下命令，这时候系统默认下载的是vue路由依赖包的3.5.3本。npm install vue-router这时候我们运行项目报了，文章标题的错误： error‘createWebHashHistory’ is not definedno-undef这时候我们main.js中的

你的玄烨

6403人浏览 · 2021-11-10 14:33:27

你的玄烨 · 2021-11-10 14:33:27 发布

页面理想状态： 左侧的导航菜单部分固定，右侧主体内容跟随路由切换
在这里插入图片描述
我使用的vue3， 当我开发到路由部分时，我直接执行了如下命令，这时候系统默认下载的是vue路由依赖包的3.5.3版本。

npm install vue-router

在这里插入图片描述
这时候我们运行项目报了，文章标题的错误： error ‘createWebHashHistory’ is not defined no-undef

这时候我们main.js中的路由引入和配置是：

这里我不确定具体的原因是什么，但是表面上看是vue-router v3.x版本的路由没有这个API，查阅一些文档找到了解决方法：升级路由为vue-router v4.x版本：

# 升级修复
npm install vue-router@next
# + vue-router@4.0.10

这时候对应的我们的路由配置就要有所修改了

此时，再启动我们的项目就成功了：路由也可以自由切换

![在这里插入图片描述](https://img-blog.csdnimg.cn/9edebdb41be74d2e841a54ca2f6a304a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5L2g55qE546E54Oo,size_20,color_FFFFFF,t_70,g_se,x_16