vue-router重写push方法,解决相同路径跳转报错,解决点击菜单栏打开外部链接
修改vue-router的配置文件,默认位置router/index.js
import Vue from 'vue'
import Router from 'vue-router' /**
* 重写路由的push方法
* 解决,相同路由跳转时,报错
* 添加,相同路由跳转时,触发watch (针对el-menu,仅限string方式传参,形如"view?id=5")
*/ // 保存原来的push函数
const routerPush = Router.prototype.push
// 重写push函数
Router.prototype.push = function push(location) { // 这个if语句在跳转相同路径的时候,在路径末尾添加新参数(一些随机数字)
// 用来触发watch
if(typeof(location)=="string"){
var Separator = "&";
if(location.indexOf('?')==-1) { Separator='?'; }
location = location + Separator + "random=" + Math.random();
} // 这个语句用来解决报错
// 调用原来的push函数,并捕获异常
return routerPush.call(this, location).catch(error => error)
} Vue.use(Router) export default new Router({
routes: [
{
path: '/', }
]
})
/ 如果你的改了push还是没有生效,可以考虑改replace方法
// 修改路由replace方法,阻止重复点击报错
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err);
};
vue解决点击菜单栏跳转外部链接
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (location) {
console.log(location)
let user = ''
if(window.sessionStorage.getItem('user')){
user = JSON.parse(window.sessionStorage.getItem('user')).roles[0].roleName
}
console.log(typeof(location))
if(typeof(location) == "string"){
if(location.indexOf('http') == 0){
if(user == '超级权限'){
var Separator = "&";
if(location.indexOf('?')==-1) { Separator='?';}
location = location + '#/login' + Separator + 'key=123456';
window.open(location)
}else{
location = location + '#/login';
window.open(location)
}
}else{
return VueRouterPush.call(this, location).catch(err => err)
}
}else{
return VueRouterPush.call(this, location.path).catch(err => err)
}
}
vue-router重写push方法,解决相同路径跳转报错,解决点击菜单栏打开外部链接的更多相关文章
- vue路由跳转报错解决
vue路由跳转: setTimeout(function () { console.log(this); this.$router.push("/login"); },800) 语 ...
- 10. vue axios 请求未完成时路由跳转报错问题
axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...
- Pyqt 打开外部链接的几种方法
Pyqt 触发一个事件,打开外部链接,我找到了这个方法,供大家参考 1. QDesktopServices 的openUrl 方法 QtGui.QDesktopServices.openUrl(QtC ...
- push方法的页面间跳转--
一,自定义动画写push方法-- 添加coreGraphics.framework框架 在CATransitionAnimation.h文件里面引入-- #import <QuartzCore/ ...
- Vue+DataTables warning:table id=xxxx -Cannot reinitialize DataTable.报错解决方法
问题描述: 使用DataTables来写列表,用vue来渲染数据,有搜索功能,每次点击搜索就会报错,如下图所示. 问题排查: 找了一系列原因,最后发现是我每次请求完数据之后都会添加分页功能,从而导致了 ...
- Vue router拦截 如果用户并未登录直接跳转到登录界面(最简单的cookie演示)
router.beforeEach(function(to,from,next){ console.log('路由拦截') console.log(to.name) console.log(from. ...
- vue router 中,children 中 path 为空字符串的路由,是默认打开的路由(包括在 el-tabs 中嵌套路由的情况)
详见该页面的最后一个代码块:https://router.vuejs.org/zh/guide/essentials/nested-routes.html#%E5%B5%8C%E5%A5%97%E8% ...
- Vue 路由跳转报错 Error: Avoided redundant navigation to current location: "/XXX".
在router文件夹下的index.js中加入红色字体代码即可解决 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(V ...
- Vue Router 常见问题(push报错、push重复路由刷新)
Vue Router 常见问题 用于记录工作遇到的Vue Router bug及常用方案 router.push报错,Avoided redundant navigation to current l ...
- Vue Router的懒加载路径
单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...
随机推荐
- jenkins打包报错的排查思路与解决
背景 废话少说, 在新建一个jenkins流水线时, 碰到了打包死活无法成功的问题, 相关配置如下图 运行后最后的日志如图 定位问题 通过查看日志, 发现报错的模块是构建后执行shell的时候, 但是 ...
- 静态vlan的划分实验
静态vlan的划分 1,toupu图 2,配置id与子网掩码 2.1,pc,server的ip与子网配置 pc5 pc6 pc7 pc8 server1 server2 3,vlan的静态划分 1,v ...
- GIT保存记录原理之commit对象
GIT 中提交对象非常的重要,我们通过它记录代码提交过程.进行文件保存.回退等操作,那么它是怎样帮助我们记录这些信息的呢?其实就是都保存在项目根目录的 .git 文件夹中. 新建空项目 ```gitD ...
- SpringBoot3进阶用法
标签:切面.调度.邮件.监控: 一.简介 在上篇<SpringBoot3基础>中已经完成入门案例的开发和测试,在这篇内容中再来看看进阶功能的用法: 主要涉及如下几个功能点: 调度任务:在应 ...
- 一文详解TextBrewer
本文分享自华为云社区<TextBrewer:融合并改进了NLP和CV中的多种知识蒸馏技术.提供便捷快速的知识蒸馏框架.提升模型的推理速度,减少内存占用>,作者:汀丶. TextBrewer ...
- WPF如何构建MVVM+模块化的桌面应用
为何模块化 模块化是一种分治思想,不仅可以分离复杂的业务逻辑,还可以进行不同任务的分工.模块与模块之间相互独立,从而构建一种松耦合的应用程序,便于开发和维护. 开发技术 .Net 6 + WPF + ...
- 1、Spring简介
1.1.概述 Spring 是轻量级的框架,其基础版本只有 2 MB 左右的大小. Spring 框架是一个开源的 Java 平台,它最初是由 Rod Johnson 编写的,并且于 2003 年 6 ...
- WPF学习 - 动画基础(1)
1. WPF中的动画(Animation),是一种属性动画.技术上来说,它是让属性从一个值,变化到另一个值的过程.因此,有两条重要的特性: 1.1 只能为依赖属性应用动画(因为第二条特性). 1.2 ...
- 斜率优化DP 学习笔记
斜率优化 DP 适用情况 适用于求解最优解(最大.最小)问题. 上凸壳与下凸壳 求解步骤 对于任意状态转义方程,设 \(A_i\),\(B_i\),使状态转移方程转化为 \(f_i = \min(f_ ...
- 「にちじょう記録」MTIDnWtMOA
Mistakes That I Don't Want to Make Once Again. // Caution // 差分 / 前缀和后注意询问区间端点有变化-- 不要考虑了右边界就不考虑左边界 ...