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

最新推荐文章于 2025-05-29 21:57:28 发布

你的玄烨

最新推荐文章于 2025-05-29 21:57:28 发布

阅读量6.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 前端框架 node.js 文章标签： vue.js 前端哈希算法

本文链接：https://blog.csdn.net/CCQStudy/article/details/121246391

前端框架同时被 3 个专栏收录

13 篇文章

订阅专栏

Vue

7 篇文章

订阅专栏

node.js

5 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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