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的大小.个数和页面加载速度的 ...
随机推荐
- 一些重要的sql命令
SELECT - 从数据库中提取数据 UPDATE - 更新数据库中的数据 DELETE - 从数据库中删除数据 INSERT INTO - 向数据库中插入新数据 CREATE DATABASE - ...
- Docker Dockerfile指令大全
FROM-指定基础镜像 指定基础镜像,并且Dockerfile中第一条指令必须是FROM指令,且在同一个Dockerfile中创建多个镜像时,可以使用多个FROM指令. # 语法格式 FROM < ...
- 不重启Docker能添加自签SSL证书镜像仓库吗?
应用背景 在企业应用Docker规划初期配置非安全镜像仓库时,有时会遗漏一些仓库没配置,但此时应用程序已经在Docker平台上部署起来了,体量越大就越不会让人去直接重启Docker. 那么,不重启Do ...
- GitHub Deskhub使用
(适合已经知道git是啥但是还不太熟到同学看-) GitHub deskhub就是一个图形化的github管理工具啦,比起来命令行使用舒服100倍哈哈哈- 链接:https://desktop.git ...
- 在.NET Framework中使用RocketMQ(阿里云版)实战【第二章】
章节 第一章:https://www.cnblogs.com/kimiliucn/p/17662052.html 第二章:https://www.cnblogs.com/kimiliucn/p/176 ...
- C#中的ConcurrentExclusiveSchedulerPair类
为什么使用ConcurrentExclusiveSchedulerPair? 现实生活中的例子是一个停车场的入口和出口,多辆车可以同时进入和离开停车场,但是只有一个车辆可以进入或离开一次. 这时候就需 ...
- WPF学习 - 自定义窗体(二)
上一篇文章写了如何创建自定义窗体:使用 WindowChrome 或者 WindowStyle="None"这两种方式.本文将讲述如何设置窗体的效果(以阴影效果为例),以及在效果模 ...
- 破局DevOps|8大北极星指标指引研发效能方向
放弃那些动辄就上百个的研发度量指标吧,8大北极星指标指引你的研发效能方向,1个北极星指标公式让你清晰了解公司研发效能现状. 每当研发效能/DevOps业务做规划的时候,有的人就会毫无头绪,不知道如何 ...
- 为不断增长的Go生态系统扩展gopls
原文在这里. 由 Robert Findley and Alan Donovan 发布于 2023年9月8日 今年夏天初,Go团队发布了gopls的v0.12版本,这是Go语言的语言服务器,它进行了核 ...
- 【krpano】KRPano测试开发专用浏览器
KRPano技术解密网站:http://www.krpano.tech 在开发KRPano项目时候,每次测试时均需要打开测试服务器,或者上传到空间中才能进行测试,十分不方便. 因此本站提供了免费的KR ...