Vue启动时报错的解决方案,以及解决相同路径跳转报错的问题

简介: Vue启动时报错的解决方案,以及解决相同路径跳转报错的问题

一、Vue启动时报错

Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)

启动项目时出现这个错误,检查了下是自己的vue-router安装的版本错误,我写的项目是vue2,vue-router安装的是4.x版本(这是vue3的),版本过高需要卸载重装。



执行卸载
npm uninstall vue-router
如果报错,换成下面
npm uninstall vue-router --legacy-peer-deps
接着安装vue2对应的3.x版本的vue-router版本号
npm install --save vue-router@3

错误解决,启动项目就成功了~

二、相同路径跳转报错

编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?(VueRouter3中的问题(vue2使用),VueRouter4已修复(vue3使用)

注意:编程式导航(push|replace)才会有这种情况的异常,


在router的index.js里面写,在use之前,如果加上以下代码,报错‘Cannot read properties of undefined (reading ‘catch’) at VueRouter.push ’那就是vue-router的版本问题,安装高一点的版本即可3.1.6以上

// 保存原来的push函数
const originalPush = Router.prototype.push;
// 重写push函数
Router.prototype.push = function push(location) {
  // return originalPush.call(this, location).catch(err => err);

  // 这个if语句在跳转相同路径的时候,在路径末尾添加新参数(一些随机数字)
  // 用来触发watch
  if(typeof(location)=="string"){
    var Separator = "&";
    if(location.indexOf('?')==-1) { Separator='?'; }
    location = location + Separator + "random=" + Math.random();
  }
 
  // 这个语句用来解决报错
  // 调用原来的push函数,并捕获异常
  return originalPush.call(this, location).catch(error => error);
};
Vue.use(Router);


完整代码


import VueRouter from 'vue-router'

// 解决报错
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(error => error);
}
// replace
VueRouter.prototype.replace = function push (location) {
    return originalReplace.call(this, location).catch(error => error);
}

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes
})
目录
相关文章
|
1天前
|
JavaScript
vue 函数化组件
【10月更文挑战第1天】 Vue.js 的函数化组件通过设置 `functional: true`,使其无状态和无实例,从而减少渲染开销。通过 `render` 函数的 `context` 参数传递数据。示例中,`smart-item` 组件根据 `data.type` 动态选择并渲染 `ImgItem`、`VideoItem` 或 `TextItem` 组件。根实例 `app` 通过按钮切换不同类型的组件数据。函数化组件适用于程序化选择组件和操作传递数据的场景。
|
1天前
|
JavaScript 开发者
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
【10月更文挑战第8天】vue指令的开发看这篇文章就够了!超详细,赶快收藏!
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
|
2天前
|
JavaScript 前端开发
Vue开发必备:$nextTick方法的理解与实战场景
Vue开发必备:$nextTick方法的理解与实战场景
23 1
|
2天前
|
JavaScript
Vue路由传参实战指南:三种常用方法示例演示
Vue路由传参实战指南:三种常用方法示例演示
10 0
|
3天前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
23 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
4天前
|
JavaScript
vue知识点
10月更文挑战第2天
20 3
|
2天前
|
存储 JavaScript 前端开发
Vue中组件通信方式有哪些?
本文介绍了 Vue 中几种常见的组件间通信方式,包括 Props / $emit、provide / inject、ref / refs、eventBus、Vuex、$parent / $children、$attrs / $listeners 以及通过 vue-router 传参。每种方式都有其适用场景和注意事项,帮助开发者根据具体需求选择合适的通信方式。
10 3
Vue中组件通信方式有哪些?
|
2天前
|
JavaScript
VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
这篇文章是关于Vue.js的学习指南,涵盖了事件监听、条件判断、循环遍历、数组方法响应性、案例分析以及高阶函数的使用。
14 2
VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
|
3天前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
13 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
2天前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
17 1