引入Vue-router报错

Vue2与Vue-router3版本冲突解决
最新推荐文章于 2024-10-09 19:01:02 发布
原创 最新推荐文章于 2024-10-09 19:01:02 发布 · 3k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #npm

在尝试引入vue-router时遇到问题，错误源于vue-router的版本不匹配。npm默认安装的vue-router4适用于Vue3，但我的项目基于Vue2。通过降级到vue-router@3.5.3版本，成功解决了兼容性问题。

今天在引入router时遇到了一个报错

在这里插入图片描述

在这里插入图片描述
一旦引入vue-router就报底层错误，后来排了很久，发现原来是版本问题，npm默认安装最新版的vue-router 4版本，但是4版本对针对vue3的，而我用的是vue2，所以这样要改成vue-router@3.5.3版本就可以了

vue：vue-router按需加载 component: () =＞ import() 出现错误（vue2 vue3使用路由component: () =＞import (‘ ‘)加载报错解决办法）
高级前端工程师
08-16 3641
解决vue-router按需加载component: () => import()报错问题，vue-router 按需加载 component: () => import() 报错的解决，解决vue路由动态加载报错，vue-router 按需加载 component: () = import() 报错的解决，VUE异步组件-处理加载状态在路由组件中使用无效，解决vue的router组件component在import时不能使用变量问题，vue路径component使用import的方式来写，Vue 动态组件
Vue配置路由后启动报错：export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘
明静致远
07-05 667
在package.json中可以看到Vue版本为2.6.14，vue-router版本为4.4.0。由于vue与vue-router版本不兼容导致异常。由于项目中使用vue2版本，所以安装vue-router时指定版本。main.js文件中也正确引入VueRouter包。
安装vue-router及报错问题
io_123io_123的博客
09-25 2884
vue项目安装vue-router及报错“Cannot read properties of undefined (reading ‘install‘) at Vue.use” 问题
Vue-router 里 import 动态导入模块报错
qq_42345237的博客
06-29 4606
router 里 import 报错 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'layout', component: () => import('@/layout/Index') } ] }) 如果没有安装babel-plu
前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决【引入新建页面或者通过router引入时报错】
在写作的路上持续输出。
01-09 6872
前端vue中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决【引入新建页面或者通过router引入时报错】
Bug 关于vue3无法解析router-view Failed to resolve component: router-view
technologist_20的博客
04-13 9751
const app = createApp(App); app.use(router); //app.use(router)这个必须在mount('#app')前面，不然会导致可能无法渲染 app.mount('#app');
CDN引入Vue Router时，出现无法跳转新页面的问题
u010623450的博客
09-02 976
2.0.0版本有这个问题；替换为最新版（3.3.4），跳转正常。
解决Vue-Router升级导致的Uncaught (in promise)问题
11-19
- 在引入router.js之前重写`push`方法，以确保所有导航都有错误处理，如上述代码所示。 通过这些方法，你可以确保在升级Vue-Router后，能够优雅地处理路由跳转过程中可能出现的错误，避免控制台显示`Uncaught (in ...
vue-router四版本-适用vue3
weixin_68658847的博客
04-10 5130
vue-router四版本-适用vue3
Vue3学习与实战 · 配置使用vue-router路由
qq_24428851的博客
10-09 2201
随着Vue版本的升级，Vue 2.x项目和Vue 3.x项目在使用vue-router上有些区别，本文就简单介绍下vue-router在Vue3中的配置和使用。
vue3的router文件引入(使用)vuex
我只是个很菜的前端
09-15 469
vue3的router文件引入(使用)vuex
vue3.0vue-router报错解决方案
weixin_44251396的博客
01-06 2172
VUE.js项目中控制台报错： Uncaught (in promise) NavigationDuplicated解决方法 问题愿意：依赖包中vue-router出现问题（猜测为版本问题）； 解决方法：在项目目录下运行 npm i vue-router@3.0 -S 这条指令就可以解决了。（更换版本） 或者在main.js中添加以下代码： import Router from 'vue-...
关于vue2项目引入vue-router的一些坑
qq_44844751的博客
04-08 928
在main.js文件中引入vue-router时，我在new vue({})这里碰到一点小坑，import test from './router’这里我随便取了一个名字直接放到new vue({test,})里,没想到直接报TypeError: route is undefined"的错，因为new vue里用了缩略写法，所以想要自定义router名字的话要这么写!!!：new vue({router:test}) ...
vue添加路由模块报错
qq_45888887的博客
04-19 1479
项目场景： 提示：这里简述项目相关背景： vue项目添加路由模块报错 问题描述 提示：这里描述项目中遇到的问题： 报错代码 npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: shop@0.1.0 npm ERR! Found: vue@2.6.14 npm ERR! node_modules/vue npm ERR! vue@"^2.6.11" from the root pro
vue在main.js中引入三方插件不生效的原因
qq_41867900的博客
02-03 988
有的时候需要比较复杂的功能,但是自己实现比较复杂的话,可以引入第三方插件.如果这个第三方插件需要全局都使用的话,可以在main.js中进行引入. 比如router elementplus之类的., 否则这二者的引入会影响其余三方插件的正常使用。但是有的时候我们会发现明明我们。,这个产生的原因是因为。
【转载】vue项目main.js文件下import router from ‘./router‘默认导入router文件夹下index.js的原因
weixin_41604040的博客
12-02 4020
【转载】vue项目main.js文件下import router from './router'默认导入router文件夹下index.js的原因 在vue项目文件夹下的src目录的main.js文件中，是这么引入router的： import router from './router' 等效于 import router from './router/index.js' 这个不是vue的规定而是node加载模块的方式,当require(’./router’)(import会被转为require),n
--save-dev 和 -dev
weixin_34268579的博客
01-07 884
--save-dev 和 -dev 在项目安装依赖包的时候，一直都对npm i --save 和npm i --save-dev这两个参数的使用比较混乱，现查资料实践了一下做如下总结 常见的命令有： npm i modulename 安装模块到项目目录下 npm i -g modulename 将模块安装到全局，具体安装到磁盘那个位置，要看npm config prefix的位置 npm i ...
vue-router路由配置报错提示
weixin_51597590的博客
07-01 1347
vue-router路径报错目前解决方案
Vue引入el-tooltip报错
最新发布
10-12
VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err); }; ``` ### 通用建议： - 确保element-ui版本与Vue版本兼容。 - 检查模板中el-tooltip的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值