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版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #哈希算法

本文介绍了在使用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
在这里插入图片描述

VUE（递归）语法没错，但报 ESLint: ‘formatToTree‘ is not defined.(no-undef)
weixin_39417324的博客
10-09 435
原因：ESLint(JavaScript 检查器)不允许有未定义的函数，但在递归语法中，自身需要调用自身，则嵌套在里面的函数就会被认为是没定义。此时再回去就会发现不再报错了，这两个变量的意思就是关闭了未使用的变量和函数的校验。
小程序报错：ReferenceError:history is not defined
maimunai的博客
04-22 3549
小程序修改 app.js 时报错：ReferenceError:history is not defined 在小程序的配置文件中添加配置时，出现 ReferenceError:history is not defined 的报错： app.js： { "pages": [ "pages/index/index", "pages/scenece/scenece", ...
Vue3 使用createWebHistory 页面刷新变成白页，报错 404， 解决方法
潮汐未见潮落的博客
09-22 8280
Vue3 使用createWebHistory 页面刷新变成白页，报错 404， 解决方法
Vue-Router中的三种路由历史模式详解
最新发布
构建数字世界的感官之桥 | 分享前端工程化、动效魔法与性能之舞！
05-29 1815
Vue-Router提供三种路由模式：Hash模式通过URL的#部分管理路由，无需服务器配置但URL不美观；WebHistory模式利用HTML5 History API实现无#的URL，需要服务器支持；Memory模式用于非浏览器环境，如SSR。Hash适合简单项目，WebHistory适合SEO需求，Memory专用于服务端场景。
本地vite项目路由使用createWebHistory刷新出现404
follow12138的博客
04-17 1698
/设置绝对路径，配合vite.configz中的base找到对应页面资源。
【vue】报错 Vue3 “export ‘createWebHistory, createRouter‘ was not found in ‘vue-router‘
欢迎来到C-Homes
12-03 987
重新安装npm install vue-router@next --save
Uncaught TypeError: vue_router__WEBPACK_IMPORTED_MODULE_2__.default is not a constructor 报错的解决
weixin_44161676的博客
10-12 5468
vue启动报错，Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_4__ is not a constructorindex.js中使用createRouter和createWebHistory。
ESLint: ‘xxxx‘ is not defined. (no-undef)
Admire0v0的博客
03-09 1427
当React/Vite 使用原生自带的测试功能时测试React应用时，若启用了ESLint进行检查，就会有下列报错：ESLint: 'test' is not defined. (no-undef)
解释You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ERROR in [eslint] D:\Webgis SS\code\client\webgis\src\App.vue 33:18 error 'BMap' is not defined no-undef 35:23 error 'BMap' is not defined no-undef 36:23 error 'BMap' is not defined no-undef 37:23 error 'BMap' is not defined no-undef 38:23 error 'BMap' is not defined no-undef 56:20 error 'BMap' is not defined no-undef 57:21 error 'BMap' is not defined no-undef 61:25 error 'BMap' is not defined no-undef ✖ 8 problems (8 errors, 0 warnings) webpack compiled with 1 error
06-06
这段报错信息表明在你的代码中存在8个未定义的'BMap'变量，这可能会导致代码出现问题。为了解决这些问题，你可以使用特殊的注释来禁用某些警告。例如，使用"// eslint-disable-next-line"来忽略下一行的警告，使用"/...
76:1 error 'defineOptions' is not defined no-undef
03-25
</think>### 解决方案：ESLint 报错 'defineOptions' is not defined no-undef #### 问题原因 `defineOptions` 是第三方库（如 `unplugin-vue-define-options`）提供的编译器宏，用于在 Vue 3 的 `<script setup>` ...
error 'Vue' is not defined no-undef
09-14
这个错误通常是因为在使用Vue时忘记导入Vue或者导入的方式不正确导致的。要解决这个问题，你需要...这样应该能够解决'Vue' is not defined的错误。如果问题还没有解决，请提供更多代码信息，我会尽力帮助你解决问题。
Vue3 “export ‘createWebHistory, createRouter‘ was not found in ‘vue-router‘
yb305
12-02 1558
Vue3 "export ‘createWebHistory, createRouter’ was not found in ‘vue-router’ 在vue3中vue-router写法要改变 import { createRouter, createWebHistory } from 'vue-router' //import Router from 'vue-router' // Vue.use(Router) const routes = [ { path: '/ho
解决ssr服务端渲染程序启动报错： ReferenceError: location is not defined
jiaohuizhuang6019的博客
12-05 2021
解决ssr服务端渲染程序启动报错： ReferenceError: location is not defined
【Vue3.0】报错 Object(...) is not a function，history: createWebHashHistory()
票票的博客
12-17 1513
引用hash模式运行项目报错，错误信息如下 import { createRouter, createWebHashHistory } from 'vue-router' import routes from './routes' const router = createRouter({ history: createWebHashHistory(), routes }) export default router 解决方法：升级 vue-router 版本 npm install vu
vue项目上线后在地址栏进行路由跳转出现错误页面，无法正确跳转
weixin_53068161的博客
07-17 2741
vue项目上线后路由跳转出现错误页面，无法正确跳转解决方法： 提示：本文主要介绍遇到vue3项目上线后路由跳转出现错误页面，无法正确跳转的解决方案 解决方法： 更改路由的跳转方式为hash模式： 在router/index.js下添加： import { createRouter, createWebHashHistory } from 'vue-router' 并修改原来的History模式 const router = createRouter({ history: createWebHist
error ‘xxx‘ is defined but never used no-unused-vars 的解决方法
qq_47648083的博客
03-08 9286
vue error ‘_‘ is defined but never used no-unused-vars 解决方法 错误描述：App.vue中的 ‘err’ 已定义定义却从未使用过 解决方法：在相应代码处加上注释 // eslint-disable-line no-unused-vars handleClose(done) { this.$confirm('确认关闭？') .then(_ => { // eslint-disable-line no-unu
Vue 3.0 遇到的问题
White feathe 的博客
11-19 6550
Vue3.0 安装 npm i vue@next vue-loader@next npm install vue-router@next npm i webpack webpack-cli webpack-dev-server --save-dev typescript安装依赖 npm install ts-loader --save-dev npm install typescript --save-dev npm install @vue/babel-plugin-jsx -D npm i @babe
正确解决Uncaught ReferenceError: xxx is not define异常的有效解决方法
热门推荐
wbajsjhhhhh的博客
05-03 1万+
正确解决Uncaught ReferenceError: xxx is not define异常的有效解决方法
官方的js路由router
weixin_40945354的博客
02-09 1156
// 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 // 我们后面再讨论嵌套路由。 const routes = [ { path: '/', component: HelloWorld }, { pa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值