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

原创最新推荐文章于 2026-05-12 09:34:05 发布 6.6k 阅读 AI写同款

收录于

前端框架

Vue

node.js

你的玄燁

码龄7年墨衍会员 · AI 创作全网分发

20粉丝84篇原创

关注

【vue-router源码】二、createWebHistory、createWebHashHistory、createMemoryHistory源码解析【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。阅读详情

AI摘要

本文介绍了在使用Vue 3开发中遇到的'createWebHashHistory'未定义问题，详细讲述了如何通过将vue-router版本从3.5.3升级到4.x来修复，并更新了路由配置。解决了路由切换问题，适合Vue开发者参考。

页面理想状态： 左侧的导航菜单部分固定，右侧主体内容跟随路由切换
在这里插入图片描述
我使用的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