vue-router版本和npm版本问题

最新推荐文章于 2025-05-15 14:32:27 发布
最新推荐文章于 2025-05-15 14:32:27 发布
阅读量3.2k 收藏 14
点赞数 7
CC 4.0 BY-SA版权
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/SlinaW/article/details/127816405
在项目中遇到npm版本过低导致无法直接安装vue-router，需使用--legacy-peer-deps参数安装4.0.13版本。由于与Vue2不兼容，页面显示空白。选择降级vue-router至3.1.3版本，通过卸载并强制命令重新安装成功解决匹配问题。

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

遇到的问题：

1，npm版本问题过低或过高（）

2，vue-router版本过高，不匹配vue2里使用路由的命令

安装vue-router 遇到了npm版本问题，不能直接 npm install vue-router --save-dev;

非要npm install --legacy-peer-deps vue-router@4.0.13

 此时项目的那个package.json就有了新的vue-router：（我不知道会不会同步，我把Hbuilder里的项目重新导入的）

哈哈哈哈哈哈--------做到页面路由，却因为安装的vue2与vue-router 4.0.13版本不匹配，页面是个白板~

要么升级vue,要么降级vue-router ,我先降级吧。 

1，卸载原来的npm：npm uninstall vue-router

可能需要npm uninstall vue-router --force，这个强制命令才能生效

 

2，安装指定版本npm:npm install vue-router@3.1.3

这里可能也要在后面加上强制命令，才能安装上

 然后查看package.json文件里 vue-router版本号变了没有：

 

SlinaW
关注
vue-router四版本-适用vue3
weixin_68658847的博客
04-10 4825
vue-router四版本-适用vue3
解决Vue-Router升级导致的Uncaught (in promise)问题
11-19
在升级了Vue-Router版本到到3.1.0及以上之后，页面在跳转路由控制台会报Uncaught (in promise)的问题 这是什么原因呢？ 看vue-router的版本更新日志 V3.1.0版本里面新增功能：push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常 解决方法一：在调用方法的时候用catch捕获异常 this.$router.replace({ name: 'foo' }).catch(err => { console.log('all good') }) 方法二： 对Router原型链上的push、replace方法进行重写，这
vue3.0 集成vue-router、vuex
weixin_43932067的博客
11-30 1882
搭建vue3.0脚手架插件分布情况（最新版） 输入npm info xxxx(插件名称) versions可查看当前插件所有版本 “vue”: “^3.0.0”; “vue-cli”:"^4.5.9"; “vue-router”: “^4.0.0-rc.5”; “axios”: “^0.21.0”; “vuex”: “^4.0.0-rc.2”; 第一步、安装对应的插件 cnpm i xxx(插件名称)@xxx(版本号) --save 第二步、插件集成到vue-cli脚手架中 1. 初始化vue-
【vue】【环境配置】项目无法npm run serve，显示node版本过低
最新发布
fyq_sdut的博客
05-15 513
解决方案：安装高版本node，并且启用高版本node。2）找到settings.txt文件。3、安装高版本node并启用。2、配置nvm下载镜像源。1）查看配置文件位置。
降低vue-router版本的两种方法
算法与编程之美
03-29 9222
一、引言vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。当我们在官网中安装路由或者安装时不注明版本，即默认安装router4.X，而我们创建的是vue2，只能结合 vue-router 3.x 版本才能使用。所以需要降低vue-router的版本。二、方法vue-router 4.x 只能结合 vue3 进行使用,v...
解决npm安装vue-router版本过高报错及node Sass 版本过高导致 TypeError: this.getOptions is not a function at Object报错问题
weixin_48451408的博客
07-20 1336
解决vue-router，node Sass版本过高于node.js不兼容运行报错的问题。1.首先找到package.json下的sass。
Vue3如何查看项目是否安装了vue-router路由依赖，及安装方法
weixin_47378963的博客
09-11 875
找到文件中的"dependencies"，查看其中是否有对应的vue-router的版本，如果没有，则说明vue项目创建过程中并没有安装对应的依赖；如果当前的vue3项目是基于vite构建工具创建的，那么在创建的过程中会询问是否需要安装一些依赖，一般情况下可以根据项目的需求自定义安装。安装完成之后，package.json中的dependencies中会自动加上vue-router及其版本。找到项目目录中的package.json文件；：内容仅供参考，不保证正确性。
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
导出const路由器：VueRouter =新的VueRouter（{路由：[{路径：'/'，名称：'index'，组件：Index，}，]，}，）; // sitemapMiddleware.js从“ vue-router-sitemap”导入VueRouterSitemap； 从“路径”导入路径； 导入...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-...安装npm install vue-router-nav --save用法从'vue-router-nav'Vue.use（RouterNav）导入RouterNav
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
typescript 重写了新版本，同时支持vue2.x和vue3.x 根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - ...
Vue-Router2.X多种路由实现方式总结
01-21
注意：vue-router 2只适用于Vue2.x版本，...import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) 1.定义组件，这里使用从其他文件import进来 import index from './components/inde
[vue] 解决vue-router在3.0版本以上重复点菜单报错的问题
qq_14993591的博客
11-26 355
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter) onst originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
vue-router安装失败
m0_60913945的博客
02-19 613
出现此问题原因是： vue-router 安装的版本太高了，应安装低版本，然后再次执行命令： npm i vue-router@3.5.3。
Vue-Router4 学习记录
liuzhe的博客
12-04 1220
vue-router4使用记录，萌新用。
vue-router的使用
weixin_40856652的博客
04-19 1112
一、安装 命令行进入项目的根目录， 执行 npm install vue-router --save 安装成功后， 在项目的package.json文件中的 dependencies 中会新增有 vue-router 这一项。 *注：这里可能会一个坑，出现版本问题，报出异常： warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js "export ‘watchEffect’ was not found in 'vue’
安装卸载node，vue，Vue封装路由，vuex，及路由传参，路由拦截，axios普通封装
weixin_45464486的博客
03-27 787
1.为什么要使用模块化？解决组件通信的繁琐，方便操作数据，组件中数据按需调用。每个页面数据隔离储存，解决数据臃肿问题，使用模块化较为方便。2.vue提供的组件有哪些？vue-router，vuex，等等...3.什么是声明式导航及编程式导航？声明式导航通过 router-link 跳转的，编程式导航通过 this.$router.push跳转4.为什么vue模块化中state数据写成函数？vuex模块化封装，state数据写成函数是为了防止冲突。5.项目上线后还需要axios吗?
VUE--添加动态路由/删除路由
qq_53018334的博客
09-24 4897
动态路由的添加和删除
Vue中各组件的安装和卸载
热门推荐
Andy-ZhangSir的博客
06-01 1万+
前言 在我们刚使用vue时，会发现还是有些繁琐的，他会涉及很多的安装，比如vue、webpack、vue-cli、vue-router等。本章就针对这种情况，将涉及到的安装整理一下。 vue的安装 这里介绍几种方式。也可以看官网文档 使用<script>标签引用 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 开发版本：https://cn.vuejs.org/js/vue.js 生产版本：https://cn.vuejs.org/js/vue.min.
Vue 2.x全家桶(Vue 3.0 新特性全解析)
03-09
<p style="font-size:11pt;color:#494949;"> <strong> </strong> </p> <p style="font-size:11pt;color:#494949;"> <img src="https://img-bss.csdnimg.cn/202008030120564222.png" alt="" /> </p> <div> </div>
二、测试NPM安装vue-router命令：npm install vue-router -g
02-25
### 使用 NPM 全局安装并验证 Vue Router 全局安装 `vue-router` 可以让该工具在任何地方都可被命令行调用，不过需要注意的是，对于像 `vue-router` 这样的库来说，通常推荐作为项目的局部依赖来安装而不是全局安装。然而为了满足需求，以下是按照请求执行的操作： #### 执行全局安装命令 要全局安装 `vue-router` 库，可以运行如下命令： ```bash npm install -g vue-router ``` 此命令会将 `vue-router` 安装至系统的全局环境中[^1]。 #### 验证安装成功与否 由于 `vue-router` 主要是作为一个模块供其他 JavaScript 文件导入使用的，并不会向系统添加新的 CLI 命令，因此无法直接通过命令行验证其是否存在。但是可以通过创建一个小的 Node.js 脚本来测试是否可以从全局环境加载这个包。 下面是一个简单的脚本例子 (`test-vue-router-global-installation.js`) 来确认能否从全局位置获取 `vue-router`: ```javascript try { const VueRouter = require('vue-router'); console.log('Vue Router version:', VueRouter.version); } catch (error) { console.error('Failed to load vue-router globally.'); } ``` 保存上述代码到文件后，在终端里运行 node 加上刚刚保存的 js 文件名即可看到结果： ```bash node test-vue-router-global-installation.js ``` 如果一切正常，则应该能看到打印出来的版本号；反之则说明未能正确加载来自全局安装的 `vue-router`[^3]。 考虑到实际开发场景中很少有人会选择这种方式来处理前端框架及其插件，建议还是遵循社区惯例采用局部方式安装 `vue-router` 到具体项目当中去[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值